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>