使用jQuery實現簡單的tab框

來源:互聯網
上載者:User

標籤:ext   styles   tom   html   font   簡單   ide   UI   body   

html代碼

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>實現簡單的tab框</title>
 <link rel="stylesheet" href="css/tabDemo.css">
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/tabDemo.js"></script>
</head>
<body>
 <ul class="main">
  <li class="style1">休閑裝</li>
  <li>名媛</li>
  <li>運動服</li>
 </ul>
 <ul class="sublevel">
  <li class="style2">女裝 男裝 童裝</li>
  <li>甜美風 文藝風</li>
  <li>運動男 運動女</li>
 </ul>
</body>
</html>

css代碼

* {
 margin: 0;
 padding: 0px;
}
ul {
 width: 300px;
 margin: 10px auto;
}
ul li {
 list-style: none;
}
.main li {
 text-align: center;
 float: left;
 padding: 5px;
 margin-left: 10px;
 width: 80px;
 cursor: pointer;
 background-color: #f3f2e7;
}
.main .style1 {
 width: 50px;
 font-weight: bold;
 background-color: #f3f2e7;
 border: 1px solid #837979;
 border-bottom: 0;
 z-index: 100;
 position: relative;
}
.sublevel {
 width: 260px;
 height: 80px;
 padding: 19px;
 background-color: #f3f2e7;
 clear: left;
 border: 1px solid #837979;
 position:relative;
 top: -1px;
}
.sublevel li{
 display: none;
}
.sublevel .style1{
 display: block;
}

jquery代碼

$(function () {
    //頁面開啟時  呈現的效果
    $(".sublevel li:eq(0)").show();
    //each遍曆輸出
    $(".main li").each(function(index) {
        //click 點擊
        $(this).click(function() {
             //addClass()增加當前樣式                       removeClass()移除除當前點擊之外的同級樣式
            $(this).addClass("main style1").siblings().removeClass("style1");
            $(".sublevel li:eq("+index+")").show().siblings().hide();
        })
    })
})

使用jQuery實現簡單的tab框

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.