选项卡 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            list-style: none;
            height:40px;
            width:100px;
            float:left;
            background-color: #00CC00;
            border: 1px solid blue;
            text-align: center;
        }
        #d1{
            height:400px;
            width:400px;
            background-color:red;
            text-align: center;
        }
        #d2{
            height:400px;
            width:400px;
            background-color:orange;
            text-align: center;
        }
        #d3{
            height:400px;
            width:400px;
            background-color:yellow;
            text-align: center;
        }
        .block{
            display: block;
        }
        .none{
            display: none;
        }
        #d4{
            clear:both;
        }
    </style>
</head>
<body>
<ul>
    <li id="l1">德玛</li>
    <li id="l2">流浪</li>
    <li id="l3">拉克丝</li>
</ul>
<h1 id="d4"></h1>
<div id="d1" class="none">没蓝跑得快</div>
<div id="d2" class="none">控你没商量</div>
<div id="d3" class="none">漂亮哈哈哈</div>
<script src="jquery-2.2.4.min.js"></script>
<script>
    $(document).ready(function(){
        $('#l1').click(function(){
            $('#d1').attr('class','block').siblings('div').attr('class','none');
  //         $('#d2').attr('class','none');
  //          $('#d3').attr('class','none');
  //          $('#d1').siblings('div').attr('class','none');
        });
        $('#l2').click(function(){
    //      $('#d1').attr('class','none');
            $('#d2').attr('class','block').siblings('div').attr('class','none');
   //         $('#d2').siblings('div').attr('class','none');
   //        $('#d3').attr('class','none');
        });
        $('#l3').click(function(){
 //          $('#d1').attr('class','none');
  //         $('#d2').attr('class','none');
            $('#d3').attr('class','block').siblings('div').attr('class','none');
    //        $('#d3').siblings('div').attr('class','none');
        })

    });
</script>
</body>
</html>
posted @ 2016-10-06 15:42  liwei742314100  阅读(170)  评论(0)    收藏  举报