Question

我正在开发网站，我正在使用jquery在页面上显示下拉内容。当您单击顶部的其中一个选项卡时，窗口会随内容下降。然而，我的困境是弄清楚如何隐藏这些下拉，直到访问者点击其中一个标签。目前，标记为tab1或“Test 1”的选项卡显示何时加载页面。如何在单击链接之前隐藏这些图层。我是理解jquery的新手，但我发现我喜欢它的功能和能力而不使用Flash。

下拉列表的脚本是：

<script type="text/javascript">
$(document).ready(function(){
$('ul.tabNav a').click(function() {
    var curChildIndex = $(this).parent().prevAll().length + 1;
    $(this).parent().parent().children('.current').removeClass('current');
    $(this).parent().addClass('current');

$(this).parent().parent().next('.tabContainer').children('.current').slideUp('fast',function() {
        $(this).removeClass('current');
        $(this).parent().children('div:nth
child('+curChildIndex+')').slideDown('normal',function() {
            $(this).addClass('current');
        });
    });
    return false;                               
});
});
</script>

导航链接设置为：

<div id="nav">
    <ul class="tabNav">
<li class="current"><a href="?tab=1">Test 1</a></li>
<li><a href="?tab=2">Test 2</a></li>
<li><a href="?tab=3">Test 3</a></li>
<li><a href="?tab=4">Test 4</a></li>
<li><a href="?tab=5">Test 5</a></li>
    </ul>
<div class="tabContainer">

    <div class="tab current">
    <h1>Test Heading</h1>
    <p>Test body content </p>
</div>

    <div class="tab">
<h1>Test Heading</h1>
    <p>Test body content </p>
    </div>

    <div class="tab">
    <h1>Test Heading</h1>
    <p>Test body content </p>
    </div>

<div class="tab">
    <h1>Test Heading</h1>
    <p>Test body content </p>
    </div>

<div class="tab">
    <h1>Test Heading</h1>
    <p>Test body content </p>
    </div>
</div>

这是标签的css：

<style type="text/css">
ul.tabNav {
list-style: none;
width: 100%;
float: left;
}
ul.tabNav li {
float: left;
margin: 0;
}
ul.tabNav li.current {
}
ul.tabNav a {
color: #FFF;
display: block;
height: 66px;
padding: 10px;
text-decoration: none;
width: 66px;
margin-left: 4px;
font-size: 16px;
border: 1px solid #FF9933;
text-align: center;
font-weight: normal;
text-transform: lowercase;
font-family: "Century Gothic";
letter-spacing: 1px;
line-height: 60px;
}
ul.tabNav li.current a {
padding: 10px;
}
div.tabContainer {
clear: both;
float: right;
width: 500px;
z-index: 9999;
}
div.tabContainer div.tab {
border: 1px solid #FF9933;
color: #FFF;
display: none;
padding: 10px;
background-image: url(images/slideshow_bg.png);
background-repeat: repeat;
margin-top: 14px;
height: 435px;
}
div.tabContainer div.current { display: block; }
div.tab p:last-child { margin-bottom: 0; }
</style>

有任何建议，或者我为了做我需要的东西而错过了什么？

谢谢！

Answer 1

我会做这样的事情：

$('ul.tabNav a').click(function() {
  /* retrieves the index of the LI in the UL 
  This index should be the same than the corresponding item in .tabContainer */
  var curChildIndex = $(this).parents("ul").eq(0).find("li").index($(this).parent());
  /* We remove the class from all elements in tabContainer and tabNav */
  $(".tabNav,.tabContainer").find("li").removeClass('current');
  /* We add the class to the LI in which we clicked the link */
  $(this).parent().addClass("current");
  /* Here, I assume that your content in .tabContainer is in a DIV
    but you might want to change this */
  $(".tabContainer").find("div").eq(curChildIndex).addClass("current");
});

Answer 2

要隐藏class="tab"的所有div，您可以使用CSS：

.tabContainer .tab { display：none; }

我还建议将你的html加价修改为：

<ul class="tabNav">
    <li class="current"><a href="#tab1">Test 1</a></li>
    <li><a href="#tab2">Test 2</a></li>
    <li><a href="#tab3">Test 3</a></li>
    <li><a href="#tab4">Test 4</a></li>
    <li><a href="#tab5">Test 5</a></li>
</ul>

这使用#来标识同一页面中的片段/元素，代替?。虽然这只是因为我发现使用浏览器的内置#函数和CSS更容易，而不是使用jQuery（或服务器端脚本）来访问通过http传递的键/值对。 GET'方法。

要将上述内容与您当前的代码一起使用，可以很容易地使用jQuery将id分配给相关元素：

$('.tabContainer > div.tab').each(
function(i) {
    this.id = 'tab' + (i + 1);
});

JS Fiddle demo of the above ideas

如何隐藏jquery选项卡式导航图层

2 个答案: