选项卡练习

        之前做了《锋利的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节点的这个知识点。