jQuery+CSS實現的標簽頁效果示例【測試可用】

2019-11-19 13:15:57

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery+CSS實現的標簽頁效果。分享給大家供大家參考，具體如下：

CSS代碼：

#tabs{  width:600px;  height:250px;  background:white;  margin:20px;}#tabs ul{  float:left;  margin:20px 0 0 20px;  padding:0;}#tabs li{  width:80px;  height:40px;  line-height:40px;  display:inline-block;  text-align:center;  border-bottom:1px solid grey;  border-top-left-radius:5px;  border-top-right-radius:5px;  background:#eeeeee;  position:relative;  top:1px;}#tabs li:hover{  color:#aaaaaa;  cursor:pointer;}.items{  width:560px;  height:175px;  font-size:16px;  text-align:center;  border:1px solid grey;  float:left;  margin-left:20px;}

jQuery代碼：

$(document).ready(function(){  $("li").bind("click",function(){    $(".items").hide();    $("#"+$(this).attr("name")).show();    $("li").css({      "border-top":"1px solid white",      "border-left":"1px solid white",      "border-right":"1px solid white",      "border-bottom":"1px solid grey",      "background":"#eeeeee"    });    $(this).css({      "border-top":"1px solid grey",      "border-left":"1px solid grey",      "border-right":"1px solid grey",      "border-bottom":"1px solid white",      "background":"white"    });  });  $("li:first-child").click();});

HTML部分代碼：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><div id="tabs">  <ul>    <li name="lst1">標簽1</li>    <li name="lst2">標簽2</li>    <li name="lst3">標簽3</li>    <li name="lst4">標簽4</li>  </ul>  <div class="items" id="lst1">內容1</div>  <div class="items" id="lst2">內容2</div>  <div class="items" id="lst3">內容3</div>  <div class="items" id="lst4">內容4</div></div>

這里使用在線HTML/CSS/JavaScript前端代碼調試運行工具：http://tools.VeVB.COm/code/WebCodeRun，測試運行效果如下：