Rumah > Artikel > hujung hadapan web > jquery melaksanakan tab dengan functionality_jquery bersarang

jquery melaksanakan tab dengan functionality_jquery bersarang

WBOYasal: 2016-05-16 15:15:431068semak imbas

Semua orang mesti biasa dengan fungsi tab ini tidak lebih daripada mengklik atau melayang tetikus untuk menukar kandungan yang berkaitan.
Dalam keadaan biasa, tab yang anda lihat tidak mempunyai fungsi bersarang, yang bermaksud bahawa lapisan kesan pensuisan telah selesai Bab ini berkongsi contoh kod untuk merealisasikan fungsi bersarang tab, iaitu dalam tab Tab bersarang fungsi boleh menampung lebih banyak kandungan.
Kodnya adalah seperti berikut:

<head>
<meta charset="gb2312">
<title>jquery选项卡</title>
<style type="text/css">
body, ul, li, div, a{
 margin:0px;
 padding:0px;
}
body{
 margin-top:10px;
 margin-left:15px;
}
#all{
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
 border-bottom:1px solid #ccc;
 width:255px;
}
#title li{
 float:left;
 list-style:none;
 width:50px;
 border-top:2px solid #f60;
 border-right:1px solid #ccc;
 text-align:center;
 padding-top:3px;
}
#title li:last-child{
 border-right:1px solid #fff;
}
.new{
 border-bottom:1px solid #fff;
 color:#f60;
}
.old{
 border-bottom:1px solid #ccc;
}
#content{
 clear:both;
}
#content ul{
 margin-left:5px;
 list-style:none;
 float:left;
}
#content li{
 width:40px;
 height:30px;
 background-color:#f60;
 text-align:center;
 color:#fff;
}
.inContent{
 width:205px;
 height:90px;
 background-color:#f6c;
 margin-left:50px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(function(){ 
 $("#title li:first").addClass("new").siblings().addClass("old"); 
 $("#content div:first").show().siblings().hide(); 
 $(".inContent:first").show().siblings().hide(); 
 $("#title li").click(function(){ 
  $(this).addClass("new").removeClass("old").siblings().addClass("old").removeClass("new"); 
  $(".info").hide().eq($("#title li").index(this)).show(); 
  $(".info div:first-child").show().siblings().hide(); 
 }); 
 
 $(".info li").mouseover(function(){ 
  $(this).css("color","#20f"); 
  $(".inContent").hide().eq($(".info li").index(this)).show(); 
 }); 
 $(".info li").mouseout(function(){ 
  $(this).css("color","#fff"); 
 });
}); 
</script>
</head>
<body>
<div id="all">
 <div id="title">
  <ul>
   <li>要闻</li>
   <li>国内</li>
   <li>时尚</li>
   <li>旅游</li>
   <li>科技</li>
  </ul>
 </div>
 <div id="content">
  <div style="clear:both;" class="info">
   <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
   </ul>
   <div>
    <div class="inContent">A1</div>
    <div class="inContent">B1</div>
    <div class="inContent">C1</div>
   </div>
  </div>
  <div class="info">
   <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
   </ul>
   <div>
    <div class="inContent">A2</div>
    <div class="inContent">B2</div>
    <div class="inContent">C2</div>
   </div>
  </div>
  <div class="info">
   <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
   </ul>
   <div>
    <div class="inContent">A3</div>
    <div class="inContent">B3</div>
    <div class="inContent">C3</div>
   </div>
  </div>
  <div class="info">
   <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
   </ul>
   <div>
    <div class="inContent">A4</div>
    <div class="inContent">B4</div>
    <div class="inContent">C4</div>
   </div>
  </div>
  <div class="info">
   <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
   </ul>
   <div>
    <div class="inContent">A5</div>
    <div class="inContent">B5</div>
    <div class="inContent">C5</div>
   </div>
  </div>
 </div>
</div>
</body>
</html>

Kod di atas melaksanakan fungsi bersarang tab Berikut ialah pengenalan kepada proses pelaksanaannya.
1. Prinsip pelaksanaan:
Prinsipnya sebenarnya sangat mudah. Malah, tab kecil bersarang di dalam tab yang besar, dan kemudian tab kecil ditukar . , sila lihat komen kod untuk butiran.
2. Komen Kod:
1.$(function(){}), Selepas struktur dokumen dimuatkan sepenuhnya, laksanakan kod dalam fungsi.
2.$("#title li:first").addClass("new").siblings().addClass("old"), Dalam keadaan lalai, ia adalah id Tambah kelas yang dinamakan baharu pada elemen li pertama di bawah elemen yang nilai atributnya ialah tajuk, dan kemudian tambahkan kelas bernama lama kepada elemen li adik yang lain. Iaitu, secara lalai, fon pertama tab mendatar adalah merah, dan yang lain adalah hitam.
3.$("#content div:first").show().siblings().hide(), Tetapkan div pertama dengan id sebagai kandungan untuk dipaparkan. Unsur adik beradik yang lain disembunyikan.
4.$(".inContent:first").show().siblings().hide(), Tetapkan elemen pertama yang nilai atribut kelasnya berada dalamContent untuk dipaparkan , adik beradik unsur tersembunyi.
5.$("#title li").click(function(){}), Daftar pengendali acara klik untuk elemen li yang sepadan.
6.$(ini).addClass("baru").removeClass("lama").adik-beradik().addClass("lama").removeClass("baru"),Jika anda mengklik elemen li di bahagian atas, kelas bernama baharu akan ditambahkan pada elemen li semasa, dan kemudian kelas bernama lama akan dipadamkan Kemudian kelas bernama lama akan ditambahkan pada elemen adik beradik yang lain, dan kelas itu dinamakan baharu akan dipadamkan.
7.$(".info").hide().eq($("#title li").index(this)).show(), Kelas pertukaran pertama Unsur bernama info disembunyikan, dan kemudian elemen dengan indeks yang sepadan dipaparkan.
8.$(".info div:first-child").show().siblings().hide(), Tukar elemen div pertama di bawah info Elemen anak ditetapkan untuk ditunjukkan dan elemen lain disembunyikan.

Di atas adalah kandungan terperinci artikel ini, saya harap ia akan membantu semua orang dalam melaksanakan tab jquery.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk melompat ke halaman melalui kotak gesaan dalam kemahiran JavaScript_javascriptArtikel seterusnya：Bagaimana untuk melompat ke halaman melalui kotak gesaan dalam kemahiran JavaScript_javascript

Artikel berkaitan

Lihat lagi