Question

我有一个小网站，其中包含一个位于页面底部的div，点击此div会向上滑动到视图中。这个div包含三个'tabs'，它们又是隐藏的div，只有div1在视图上（显示tab1），点击div2的链接打开tab2，div3也是如此。

这一切都运行正常...但是每个选项卡都包含来自数据库的动态数据，其中记录集分页指向该选项卡的下一组数据（即每个选项卡仅包含数据库中的6个项目，前向和后向箭头在页面上带您进入该选项卡的下一个/上一组六个项目）。我的问题是，通过单击这些链接，主div滑回，并且选项卡返回到默认tab1。我需要主div保持显示，并保持显示的相关选项卡。有什么想法吗？

该网站的链接是http://www.elbowroom.eu/ship_image/shipinfo2.php?ship_id=65（我正在谈论的标签是词汇表标签，点击页面底部的词汇表）。

我将标签放在前面的功能是：

$(document).ready(function () {
    $("div.tab-headers>a").click(function () {
        // Grab the href of the header
        var _href = $(this).attr("href");

        // Remove the first character (i.e. the "#")
        _href = _href.substring(1);

        // show this tab
        tabify(_href);
    });
    tabify();
});
function tabify(_tab) {
    // Hide all the tabs
    $(".tab").hide();

    // If valid show tab, otherwise show the first one
    if (_tab) {
        $(".tab a[name=" + _tab + "]").parent().show();
    } else {
        $(".tab").first().show();
    }
}
// On page load...
$(document).ready(function () {
    // Show our "default" tab.
    // You may wish to grab the current hash value from the URL and display the appropriate one
    tabify();
});

以及向上/向下滑动主div的功能是：

<script type="text/javascript">
function showHide() {
    var ele = document.getElementById("showHideDiv");
    if(ele.style.display == "block") {
            ele.style.display = "none";
      }
    else {
        ele.style.display = "block";
    }
}

和html是：

<div id="slideout">
    <div id="slidecontent">
      <div class="glossary_body">
        <div class="tab-headers-wrapper">
          <div class="tab-headers">
          <a href="#tab1"></a>
          <a href="#tab2"></a>
          <a href="#tab3"></a>
          </div>
        </div>

      <!--Main Tab-->    
      <!--Deleted this to reduce the code on this site, as this first tab works-->

      <!--Ship Type Tab-->
      <div class="tab">
      <a name="tab2"></a>

        <div class="glossary_body">
        <--deleted to save space-->
        </div>

        <div class="glossary_arrow_back">
        <?php if ($pageNum_ship_type > 0) { // Show if not first page ?>
        <a href="<?php printf("%s?pageNum_ship_type=%d%s", $currentPage, max(0, $pageNum_ship_type - 1), $queryString_ship_type); ?>">
        <img src="images/arrow_left.png" />
        </a>
        <?php } // Show if not first page ?>  
        </div>

        <div class="glossary_arrow_forward" onclick="tabify()"><?php if ($pageNum_ship_type < $totalPages_ship_type) { // Show if not last page ?>
        <a href="<?php printf("%s?pageNum_ship_type=%d%s", $currentPage, min($totalPages_ship_type, $pageNum_ship_type + 1), $queryString_ship_type); ?>">
        <img src="images/arrow_right.png" />
        </a>
        <?php } // Show if not last page ?>  
        </div>
      </div>

      <!--Armament Tab-->
      <--deleted to save space-->

    </div>
  </div>

  <div id="clickme">
  </div>

隐藏的Divs消失在链接上

0 个答案: