之前做了《锋利的jquery》里的一个选项卡练习,现在来做一下回顾和总结。
页面效果比较简单,要做的炫那是CSS的事,这里主要是学习用JQ实现选项卡的原理和思路。
<div class="tab">
<div class="tab_menu clear">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box clear">
<div>时事</div>
<div class="hide">
体育
</div>
<div class="hide">
娱乐
</div>
</div>
</div>
以上是html的结构,比较简单 主要分了2块,一个大的div里放了一个menu切换的div以及对应出现内容的div,每个对应的内容套在一个div里。然后分别用了"selected"和"hide"来标注选中和隐藏的效果。
var $div_li=$("div.tab_menu ul li");
$div_li.click(function(event) {
$(this).addClass('selected').siblings().removeClass('selected');
var index=$div_li.index(this);
$("div.tab_box>div").eq(index).show().siblings().hide();
}).hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
JQ也比较简单。现在来分析下。这里最主要的思路是当前选中的标签li是在所有li中的第几个,这里用了一个index()的方法,JQ中index()的方法描述是可见http://www.css88.com/jqapi-1.9/index/ 看了这篇文章我觉得我才算全面地理解了index()这个方法。
在这里通过
var index=$div_li.index(this);
这个方法获得了当前点击的这个li在所有li中的索引值,然后结合用eq(index)这个方法把相对应的div里的内容显示出来。
最后通过鼠标经过的hover做了一组效果,这个例子就完成了
总结:这个例子主要还是学习了关于index()获取元素所在索引值,并根据索引值获得相应元素的DOM节点的这个知识点。