2014-11-21 48 views
0

我有4个div的一个网页,我使用基于所使用状突片没有按钮点击jQuery的隐藏/显示...使用Javascript/jQuery的会话处理或会话状态

对于大多数的行动没有RUNAT服务器所以标签工作正常...

在有服务器运行的情况下,选项卡默认回到原来的状态回发...我怎么能保持当前选项卡使用客户端会话处理选择并使用Jquery或Javascript加载? (这些div不是runat服务器,所以他们我不能/不想改变它以便在帖子的服务器端设置可见性)

我想知道我可以添加到每个点击的代码行函数将设置唯一的会话/本地变量。的代码的一条线,我可以添加到要显示隐藏设置为当前选择相应的选项卡的document.ready功能....如果让任何意义......

 $(document).ready(function() { 

     $("#btnTabOperator").click(function() { 
      //Sets the appropriate div to show...hides all the rest 
      $("#OperatorInfo").show(); 
      $("#OperatorProGrowth").hide(); 
      $("#OperatorCertExams").hide(); 
      $("#OperatorScanned").hide(); 
      //sets the selected button to gold, and the unselected to whitesmoke color 
      $("#btnTabOperator").css("background-color","goldenrod"); 
      $("#btnTabProGrowth").css("background-color", "whitesmoke"); 
      $("#btnTabCertAndExams").css("background-color", "whitesmoke"); 
      $("#btnTabScannedFiles").css("background-color", "whitesmoke"); 

     }); 
     $("#btnTabProGrowth").click(function() { 
      $("#OperatorInfo").hide(); 
      $("#OperatorProGrowth").show(); 
      $("#OperatorCertExams").hide(); 
      $("#OperatorScanned").hide(); 

      $("#btnTabOperator").css("background-color", "whitesmoke"); 
      $("#btnTabProGrowth").css("background-color", "goldenrod"); 
      $("#btnTabCertAndExams").css("background-color", "whitesmoke"); 
      $("#btnTabScannedFiles").css("background-color", "whitesmoke"); 

     }); 
     $("#btnTabCertAndExams").click(function() { 
      $("#OperatorInfo").hide(); 
      $("#OperatorProGrowth").hide(); 
      $("#OperatorCertExams").show(); 
      $("#OperatorScanned").hide(); 

      $("#btnTabOperator").css("background-color", "whitesmoke"); 
      $("#btnTabProGrowth").css("background-color", "whitesmoke"); 
      $("#btnTabCertAndExams").css("background-color", "goldenrod"); 
      $("#btnTabScannedFiles").css("background-color", "whitesmoke"); 

     }); 
     $("#btnTabScannedFiles").click(function() { 
      $("#OperatorInfo").hide(); 
      $("#OperatorProGrowth").hide(); 
      $("#OperatorCertExams").hide(); 
      $("#OperatorScanned").show(); 

      $("#btnTabOperator").css("background-color", "whitesmoke"); 
      $("#btnTabProGrowth").css("background-color", "whitesmoke"); 
      $("#btnTabCertAndExams").css("background-color", "whitesmoke"); 
      $("#btnTabScannedFiles").css("background-color", "goldenrod"); 

     }); 
    }); 
</script> 

回答

0

一个简单的解决方案正在使用Cookie来存储和检索标签的状态,而无需往返服务器。
UPDATE:
例如,您可以在每个上述区块注入这条线

$.cookie("activeTab", tabID); 

,并在页面加载:

var tab_id_= $.cookie("activeTab"); 
     $("#"+tab_id_).show(); 
+0

它在我抛出一个错误说它不承认$ .cookie ..所以我想通过放入一个'输入'控件并隐藏它来解决它。我基于标签点击设置其值,并在每次页面加载时检索值,并根据该值隐藏/显示合适的div。 – user2784648 2014-11-21 19:14:19

+1

忘了提及它是一个插件https://github.com/carhartl/jquery-cookie – elsadek 2014-11-21 20:17:48