点击菜单 切换内容

// html

<ul id="ul1">
　　<li>
　　　　<a href="#">预警平台</a>
　　 </li>
　　 <li>
 　　　　<a href="#">预警任务管理</a>
　　 </li>
　　<li>
　　　　 <a href="#">预警配置</a>
　　 </li>
</ul>

<div id="content">

　　<div class="tab tab-1">内容内容内容内容内容内容内容内容内容</div>

　　<div class="tab tab-2">内容内容内容内容内容内容内容内容内容</div>

　　<div class="tab tab-3">内容内容内容内容内容内容内容内容内容</div>

</div>

// css

<style>

　　.tab{

　　　　width: 100%;

　　　　height: 100%;

　　}

　　.tab-1{

　　　　background-color: red;

　　}

　　.tab-2{

　　　　background-color: blue;

　　　　display:none;

　　}

　　.tab-3{

　　　　background-color: green;

　　　　display:none;

　　}

</style>

<script type="text/javascript">

　　var lis = document.getElementById("ul1").getElementsByTagName("li");
            var divs = $(".tab");
            for(var i = 0; i < lis.length; i++) {
                lis[i].index = i;
                lis[i].onclick = function() {
                    for(var j = 0; j < lis.length; j++) {
                        lis[j].className = "";
                    }
                    this.className = "hover";
                    for(var i = 0; i < divs.length; i++) {
                        divs[i].style.display = "none";
                    }
                    divs[this.index].style.display = "block";
                }
            }

</script>