cari

Rumah >hujung hadapan web >tutorial js >Demonstrasi ringkas effect_jquery penukaran tab jQuery

Demonstrasi ringkas effect_jquery penukaran tab jQuery

WBOY
WBOYasal
2016-05-16 15:26:331490semak imbas

Contoh dalam artikel ini menerangkan kod demonstrasi mudah jQuery untuk mencapai kesan penukaran tab. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Rajah kesan operasi adalah seperti berikut

1. Program utama

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>选项卡</title>
 <link type="text/css" rel="stylesheet" href="css/layout.css" />
 </head>
 <body>
 <!--整体构局说明，用ul完成按钮的横向布局，用div完成三个内容框架的垂直布局（类似于类表），然后将三个内容框架全隐藏，通过下面的:first-child属性只将第一个框架内容显示出来-->
 <div class="tab">
 <div class="tab_menu">
 <ul>
 <li class="on">实事</li>
 <li>政治</li>
 <li>体育</li>
 </ul>
 </div>
 <div class="tab_box">
 <div>实事内容</div>
 <div>政治内容</div>
 <div>体育内容</div>
 </div>
 </div>
 <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
 <script type="text/javascript" src="js/layout.js"></script>
 </body>
</html>

2. Gaya CSS
Kod reka letak awal: 

*{ margin:0; padding:0}
ul{
 list-style: none;
}
.tab{
 width: 300px;
 margin: 0 auto;
}
.tab .tab_menu{
 border: 1px solid #000000;
 height: 30px;
 width: 300px; 
}
.tab .tab_menu ul li{
 float: left;
 width: 99px;
 text-align: center;
 line-height: 30px;
 border-right: 1px #333333 solid;
}
.tab .tab_menu ul li:last-child{
 border-right:none;
 width: 100px;
}
.tab .tab_menu ul li.on{
 background: #999;
}
.tab .tab_box > div{
 width: 300px;
 height: 200px;
 border: #333333 solid;
 border-width: 0 1px 1px 1px;
}

Kod di atas melaksanakan reka letak seperti berikut:

Tetapi kami hanya memerlukan kandungan dalam bingkai untuk dipaparkan, jadi tambahkan beberapa kod kecil untuk membantu dengan kod di atas~~~~~~

Kod gaya reka letak selanjutnya: 

*{ margin:0; padding:0}
ul{
 list-style: none;
}
.tab{
 width: 300px;
 margin: 0 auto;
}
.tab .tab_menu{
 border: 1px solid #000000;
 height: 30px;
 width: 300px; 
}
.tab .tab_menu ul li{
 float: left;
 width: 99px;
 text-align: center;
 line-height: 30px;
 border-right: 1px #333333 solid;
}
.tab .tab_menu ul li:last-child{
 border-right:none;
 width: 100px;
}
.tab .tab_menu ul li.on{
 background: #999;
}
.tab .tab_box > div{
 width: 300px;
 height: 200px;
 border: #333333 solid;
 border-width: 0 1px 1px 1px;
 display: none; //将三个内容框架全隐藏，通过下面的:first-child属性只将第一个框架内容显示出来
}
.tab .tab_box > div:first-child{
 display: block;
}

Atur cara di atas menambah paparan tambahan: tiada pada gaya .tab .tab_box > Selain itu, hanya kandungan bingkai pertama dipaparkan melalui atribut :first-child~~~~~~Inilah yang kami. lihat Reka letak adalah konsisten dengan pemaparan animasi yang baru saya siarkan di atas, dan reka letak dianggap lengkap~~~~~~
3. Kod Jquery: 

$(function(){
 $(".tab_menu ul li").click(function(){
 $(this).addClass("on").siblings().removeClass("on"); //切换选中的按钮高亮状态
 var index=$(this).index(); //获取被按下按钮的索引值，需要注意index是从0开始的
 $(".tab_box > div").eq(index).show().siblings().hide(); //在按钮选中时在下面显示相应的内容，同时隐藏不需要的框架内容
 });
});

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan 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：jquery melaksanakan tetikus hover stop carousel special effect_jqueryArtikel seterusnya：jquery melaksanakan tetikus hover stop carousel special effect_jquery

Artikel berkaitan

Lihat lagi