jQuery选项卡

<div class="tab_outer">    <ul class="menu">        <li index="c1" class="current" onclick="tab(this);">川菜</li>        <li index="c2"  onclick="tab(this);">鲁菜</li>        <li index="c3"  onclick="tab(this);">闽菜</li>        <li index="c4"  onclick="tab(this);">粤菜</li>    </ul>    <div class="content">        <div id="c1" >            <img src="images/food1.png" width="200" alt="">            <H2 style="margin-top: -40px"; color="red">宫保鸡丁</H2>        </div>        <div id="c2" class="hide">            <img src="images/food2.png" width="200" alt="">            <H2 style="margin-top: -40px">糖醋鱼</H2>        </div>        <div id="c3" class="hide">            <img src="images/food3.png" width="200" alt="">            <H2 style="margin-top: -40px">白灼芥菜</H2>        </div>        <div id="c4" class="hide">            <img src="images/food4.png" width="200" alt="">            <H2 style="margin-top: -40px">清炒时蔬</H2>        </div>    </div>

<script>    function tab(self) {        $(self)            .addClass("current")//将当前选项卡高亮            .siblings()//将其它非当前选项卡的高亮样式取消,先选择当前的兄弟节点            .removeClass("current") //再取消高亮样式        var box = "#" + $(self).attr("index")        //获取当前的自定义索引属性,获取当前点击的是哪一个        $(box)            .removeClass("hide") //去掉它的隐藏样式,将对应的内容盒子显示出来            .siblings()//再将其它兄弟盒子内容隐藏,首先先获取其它兄弟节点            .addClass("hide")//给这些兄弟节点添加隐藏样式    }</script>