jQuery+CSS實現(xiàn)滑動的標簽分欄切換效果
更新時間：2015年12月17日 11:30:20 投稿：lijiao
這篇文章主要介紹了jQuery實現(xiàn)滑動的標簽分欄切換效果，具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)平滑滾動的標簽分欄切換效果。分享給大家供大家參考。具體如下：
運行代碼如下
具體代碼如下
<html>
<head>
<title>jQuery平滑滾動的標簽分欄切換</title>
<meta charset="gb2312">
<style>
ul,li{
margin:0px;
padding:0px;
list-style:none
}
li{
float:left;
background-color:#8c6239;
color:white;
padding:5px;
margin-right:2px;
border:1px solid white;
}
li.myLi{
background-color:#ea5500;
border:1px solid #ea5500;
}
div{
clear:left;
background-color:#ea5500;
color:white;
width:300px;
height:100px;
padding:10px;
display:none;
}
div.myDiv{
display:block;
}
</style>
<script src="./jquery-1.7.1.min.js"></script>
<script>
var timeId;
$(document).ready(function(){
$("li").each(function(index){
//index是li數(shù)組的的索引值
$(this).mouseover(function(){
var liNode = $(this);
//延遲是為了減少服務(wù)器壓力，防止鼠標快速滑動
timeId = setTimeout(function(){
//將原來顯示的div隱藏掉
$("div.myDiv").removeClass("myDiv");
//將原來的li的myLi去掉
$("li.myLi").removeClass("myLi");
//顯示當前鼠標li的對應(yīng)的div
$("div").eq(index).addClass("myDiv");
//增加當前l(fā)i的myLi
liNode.addClass("myLi");
},300);
}).mouseout(function(){
clearTimeout(timeId);
});
});
});
</script>
</head>
<body>
<ul>
<li class="myLi">this is li 1</li>
<li>this is li 2</li>
<li>this is li 3</li>
</ul>
<div class="myDiv">this is div1</div>
<div>this is div2</div>
<div>this is div3</div>
</body>
</html>
希望本文所述對大家的jquery程序設(shè)計有所幫助。
相關(guān)文章
現(xiàn)在很多網(wǎng)站都有懸浮廣告，本篇文章主要介紹了jQuery右下角懸浮廣告，非常具有實用效果，有需要的朋友可以來參考一下。2016-10-10
這篇文章主要介紹了jQuery Validate表單驗證入門知識，該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API，感興趣的小伙伴們可以參考一下2015-12-12
使用EVAL處理jqchart jquery 折線圖返回數(shù)據(jù)無效的解決辦法
eval函數(shù)可以把一些處理過程序代碼進行解析從而達到可以執(zhí)行的一個狀態(tài)，本篇文章給大家介紹使用eval處理jqchart jquery折線圖返回數(shù)據(jù)無效的解決辦法，對jqchart jquery相關(guān)內(nèi)容感興趣的朋友一起學習吧2015-11-11
AJAX的跨域與JSONP(另送一個為文章自動添加短址的功能)2010-01-01
JavaScript對象之間的轉(zhuǎn)換 jQuery對象和原聲DOM
jQuery對象和原聲DOM，JavaScript對象之間的轉(zhuǎn)換，學習jquery的朋友可以參考下。2011-03-03
這篇文章主要為大家詳細介紹了layui導航欄效果的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
jQuery實戰(zhàn)之仿淘寶商城左側(cè)導航效果
網(wǎng)絡(luò)上很很多這種效果的JS寫法，但是還沒有看見用jQuery寫的，效果實現(xiàn)很簡單，確切的說是用jquery實現(xiàn)這個效果很簡單，這就是jquery的強大和魅力所在。2011-04-04
Jquery的hover方法讓鼠標經(jīng)過li時背景變色
鼠標經(jīng)過時讓li背景變色，在某些時候還是挺實用的，下面為大家介紹下使用Jquery的hover方法來實現(xiàn)下，感興趣的朋友可以參考下2013-09-09
jquery實現(xiàn)獲取具體時間(年月日)后3個月+1天的年月日
這篇文章主要為大家詳細介紹了jquery如何實現(xiàn)獲取具體時間(年月日)后3個月+1天的年月日,文中的示例代碼講解詳細,有需要的小伙伴可以參考一下2023-11-11
JQuery+Ajax實現(xiàn)數(shù)據(jù)查詢、排序和分頁功能
這篇文章介紹了利用JQuery方便實現(xiàn)基于Ajax的數(shù)據(jù)查詢、排序和分頁功能，需要的朋友可以參考下2015-09-09