原理：

導航欄的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>