第一天：jquery选项卡与javascript选项卡

jquery实现选项卡代码：

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

<script type="text/javascript">
var $div_li = $("div .tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected")
.siblings().removeClass("selected");
var index = $div_li .index(this);
$("div .tab_box >div")
.eq(index).show()
.siblings().hiden();
}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});

</script>

javascript实现选项卡代码：

<script type="text/javascript">

  function change(value,obj)
{
 obj.style.backgroundColor="#FFC12D";
//  window.alert("你好");
   if(value=='Index')
  { 

    Index.style.display='block';
    Place.style.display='none';
    Club.style.display='none';
  }
  else if(value=='Place')
  {
     Index.style.display='none';
     Place.style.display='block';
     Club.style.display='none';

  }
  else if(value=='Club')
  { 
     Index.style.display='none';
     Place.style.display='none';
     Club.style.display='block';

  }

}

</script>

部分HTML代码：

    <li onMouseover="change('Index',this)">index</li>
    <li onMousemove="change('Place',this)">place</li>        
    <li onMouseover="change('Club',this)">club</li>

由此可见，jquery在某一种程度上比javascript强大。