Question

如何使用jquery在刷新，提交和跳转菜单后保留当前选项卡。如果它太麻烦了，我不介意使用PHP和sessionstorage。但请不要使用cookies。顺便说一句，我在jquery中并不擅长。以下是示例和摘录。我也不知道为什么jquery在下面是灰色的。如果jquery造成太多麻烦，我不介意使用PHP。 TQ。请帮忙。

（useracc-test.php的）

<html>
<head>

<script src="jquery-1.11.3.min.js" type="text/javascript"></script>

 jQuery(function($) {

    $("<p>").html("Loaded at " + new Date()).appendTo(
        document.body
    );
    showTab(location.hash || "Tab 1");

    $("#nav a").click(function() {
        var hash = this.getAttribute("href");
        if (hash.substring(0, 1) === "#") {
            hash = hash.substring(1);
        }
        location.hash = hash;
        showTab(hash);
        return false;
    });

    function showTab(hash) {
        $("div.tab").hide();
        $("#tab-" + hash).show();
    }

}); 




<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
</script>
</head>
<body>
<div id="apDiv3">
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup"  id="nav">


    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
      <p>


      </p>







      </p>
    </div>
    <div class="TabbedPanelsContent">
      <form name="form2" 
      action="useracc-test.php" method="post" >
        <p>&nbsp;</p>

        <table width="500" border="0">
          <tr>
            <td>category</td>
            <td><select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,0)">
              <option value="useracc-test.php">Category</option>
              <option value="useracc-test.php">Type1</option>
              <option value="useracc-test.php">Color</option>
              <option value="useracc-test2-jumpmenu.php">Type2</option>
              <option value="useracc-test2-jumpmenu.php">Hobby</option>
            </select></td>

下面，我从互联网上更新另一个例子。如何更改此内容并应用于我的标签？

  $('ul.tabs').each(function(){
    // For each set of tabs, we want to keep track of
    // which tab is active and its associated content
    var $active, $content, $links = $(this).find('a');

    // If the location.hash matches one of the links, use that as the active tab.
    // If no match is found, use the first link as the initial active tab.
    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.addClass('active');

    $content = $($active[0].hash);

    // Hide the remaining content
    $links.not($active).each(function () {
      $(this.hash).hide();
    });

    // Bind the click event handler
    $(this).on('click', 'a', function(e){
      // Make the old tab inactive.
      $active.removeClass('active');
      $content.hide();

      // Update the variables with the new link and content
      $active = $(this);
      $content = $(this.hash);

      // Make the tab active.
      $active.addClass('active');
      $content.show();

      // Prevent the anchor's default click action
      e.preventDefault();
    });
  });

Answer 1

试试这个

function showTab(hash) {
            localStorage.setItem("hash", hash);//save hash value in localstorage
            $("div.tab").hide();
            $("#tab-" + hash).show();
        }
    $(document).ready(function () {
        if (localStorage.getItem("hash")) {//check if value exist
            showTab(localStorage.getItem("hash").toString());//set the saved tab
        }
    });

如何在提交和jumpmenu之后保留当前选项卡 - jQuery，PHP，html

1 个答案: