jquery实现html页面的导航的标签内容切换

原理：

导航栏的ul li 都对应的 一个div，每个li单机时候添加属性，并且与之对应的div展示。

主要是利用jquery的一些方法进行操作；

<ul class="switch">
    <li class="selected">导航一</li>
    <li>导航二</li>
    <li>导航三</li>
</ul>
<div class="content">
    <div>内容一</div>
    <div style="display: none">内容二</div>
    <div style="display: none">内容三</div>
</div>
<script>
    $(function(){
        /*单机切换*/
        $(".switch  li").click(
                function(){
                    /*每个li下属的div*/
                    var divShow = $(".content").children("div");
                    /*利用selected进行判断*/
                    if(!$(this).hasClass("selected")){
                    /*li标签的顺序和div的顺序是对应的，获取索引*/
                        var index = $(this).index();
                        /*当前对象设置class属性*/
                        $(this).addClass("selected");
                        /*移除其他同级元素属性*/
                        $(this).siblings("li").removeClass("selected");
                        /*展示当前li对应的div内容,利用方法显示和隐藏*/
                        $(divShow[index]).show();
                        /*隐藏同级元素*/
                        $(divShow[index]).siblings("div").hide();
                    }
                }
        )
    })
</script>