网页Tab切换

body部分  

      <div id="d2">
          <ul class="c2">
               <li>1</li>
               <li>2</li>
               <li>3</li>
          </ul>
     </div>
     <div id="d3">
          <ol>
               <li>4</li>
               <li>5</li>
               <li>6</li>
          </ol>
     </div>

style部分    

    *{
        list-style-type: none;
        padding: 0;
        margin: auto;
    }
    #d2{
        margin-left:50px ;
        float: left;
        width: 300px;
        height: 400px;
        background: darkgray;
    }
    #d2 li{
        height: 100px;
    }
    #d3 ol li{
        float: left;
        width: 500px;
        height: 400px;
        background: darkcyan;
        display: none;
    }

script部分

    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#d2 ul:first li").mouseover(function(){
                $("#d3 ol:first li").hide();
                var index=$("#d2 ul:first li").index(this);
                var i=$("#d3 ol:first li:eq("+index+")").show();
            });
        })
    </script>