jquery實現(xiàn)有過渡效果的tab切換
更新時間：2020年07月17日 15:46:10 作者：冰淇淋ly
這篇文章主要為大家詳細介紹了jquery實現(xiàn)有過渡效果的tab切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery實現(xiàn)tab切換的具體代碼，供大家參考，具體內(nèi)容如下
效果：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul,li {
list-style: none;
margin: 0;
padding: 0;
}
.tabBox {
width: 400px;
height: 200px;
border: 1px solid pink;
}
.ul1 {
height: 40px;
border-bottom: 1px solid pink;
}
.ul1 li {
width: 25%;
line-height: 40px;
text-align: center;
float: left;
cursor: pointer;
}
.ul1 li.active {
background-color: pink;
transition: all 0.6s ease-in-out; /* 標題過渡效果 */
}
.ul2 {
overflow: hidden;
}
.ul2 li {
display: none;
}
.ul2 li.selected {
display: block;
}
</style>
</head>
<body>
<div class="tabBox">
<ul class="ul1">
<li class="active">標題1</li>
<li>標題2</li>
<li>標題3</li>
<li>標題4</li>
</ul>
<ul class="ul2">
<li class="selected">內(nèi)容內(nèi)容1</li>
<li>內(nèi)容2內(nèi)容2</li>
<li>內(nèi)容3內(nèi)容3</li>
<li>內(nèi)容4內(nèi)容4</li>
</ul>
</div>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script>
$(function(){
$(".ul1>li").mouseover(function(){
$(this).addClass("active").siblings("li").removeClass("active");
var index = $(this).index();
$(".ul2>li:eq("+index+")").fadeIn(1000).siblings("li").hide();
})
})
</script>
</body>
</html>
如果大家還想深入學習，可以點擊兩個精彩的專題：javascript選項卡操作方法匯總、jquery選項卡操作方法匯總
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
jquery獲取所有選中的checkbox實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query獲取所有選中的checkbox實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jquery ajax雙擊div可直接修改div中的內(nèi)容
這篇文章主要介紹了jquery ajax雙擊div直接修改div中內(nèi)容的相關方法，感興趣的小伙伴們可以參考一下2016-03-03
jQuery插件Validate實現(xiàn)自定義表單驗證
這篇文章主要介紹了jQuery插件Validate實現(xiàn)自定義表單驗證，自定義一個驗證方法，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了jQuery中fadein與fadeout方法用法,結(jié)合實例形式分析了jQuery使用fadein與fadeout方法實現(xiàn)頁面元素淡入淡出效果的相關技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了JS JQUERY實現(xiàn)滾動條自動滾到底的方法,需要的朋友可以參考下2015-01-01
本文給大家講解關于此jQuery驗證的一些標記以及使用方法，非常不錯，具有參考借鑒借鑒價值，需要的朋友參考下2017-01-01
如何書寫高質(zhì)量jQuery代碼(使用jquery性能問題)
眾所周知，jQuery現(xiàn)在已經(jīng)非常流行，百度新首頁中也已經(jīng)開始使用jQuery，今天總結(jié)下怎么書寫更好的jQuery代碼使jQuery代碼更好、更快的執(zhí)行，希望本篇jQuery教程一改大家以前不合理的做法2014-06-06
asp.net下使用jquery 的ajax+WebService+json 實現(xiàn)無刷新取后臺值的實現(xiàn)代碼
asp.net下使用jquery 的ajax+WebService+json 實現(xiàn)無刷新取后臺值的實現(xiàn)代碼 ，比頁面刷新更好，用戶體驗更好，需要的朋友可以參考下。2010-09-09
本篇文章主要介紹了jquery css3問卷答題卡翻頁動畫效果，具有一定的參考價值，有需要的朋友可以了解一下。2016-10-10
這篇文章主要介紹了jQuery動態(tài)生成表格及右鍵菜單功能,結(jié)合實例形式分析了jQuery表格的動態(tài)操作及鼠標事件響應相關技巧,需要的朋友可以參考下2017-01-01