第一天：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强大。