jQuery+CSS實(shí)現(xiàn)滑動(dòng)的標(biāo)簽分欄切換效果
更新時(shí)間：2015年12月17日 11:30:20 投稿：lijiao
這篇文章主要介紹了jQuery實(shí)現(xiàn)滑動(dòng)的標(biāo)簽分欄切換效果，具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)平滑滾動(dòng)的標(biāo)簽分欄切換效果。分享給大家供大家參考。具體如下：
運(yùn)行代碼如下
具體代碼如下
<html>
<head>
<title>jQuery平滑滾動(dòng)的標(biāo)簽分欄切換</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ù)器壓力，防止鼠標(biāo)快速滑動(dòng)
timeId = setTimeout(function(){
//將原來顯示的div隱藏掉
$("div.myDiv").removeClass("myDiv");
//將原來的li的myLi去掉
$("li.myLi").removeClass("myLi");
//顯示當(dāng)前鼠標(biāo)li的對(duì)應(yīng)的div
$("div").eq(index).addClass("myDiv");
//增加當(dāng)前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>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jquery tab標(biāo)簽頁(yè)的制作
- 基于jQuery實(shí)現(xiàn)多標(biāo)簽頁(yè)切換的效果(web前端開發(fā))
- jQuery實(shí)現(xiàn)簡(jiǎn)單的tab標(biāo)簽頁(yè)效果
- JQuery標(biāo)簽頁(yè)效果實(shí)例詳解
- js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁(yè)功能的方法
- jqueryUI tab標(biāo)簽頁(yè)代碼分享
- jQuery+css實(shí)現(xiàn)的tab切換標(biāo)簽(兼容各瀏覽器)
- jQuery+css實(shí)現(xiàn)的換頁(yè)標(biāo)簽欄效果
- jQuery+CSS實(shí)現(xiàn)的標(biāo)簽頁(yè)效果示例【測(cè)試可用】
相關(guān)文章
現(xiàn)在很多網(wǎng)站都有懸浮廣告，本篇文章主要介紹了jQuery右下角懸浮廣告，非常具有實(shí)用效果，有需要的朋友可以來參考一下。2016-10-10
jQuery Validate表單驗(yàn)證入門學(xué)習(xí)
這篇文章主要介紹了jQuery Validate表單驗(yàn)證入門知識(shí)，該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來編寫用戶自定義方法的 API，感興趣的小伙伴們可以參考一下2015-12-12
使用EVAL處理jqchart jquery 折線圖返回?cái)?shù)據(jù)無效的解決辦法
eval函數(shù)可以把一些處理過程序代碼進(jìn)行解析從而達(dá)到可以執(zhí)行的一個(gè)狀態(tài)，本篇文章給大家介紹使用eval處理jqchart jquery折線圖返回?cái)?shù)據(jù)無效的解決辦法，對(duì)jqchart jquery相關(guān)內(nèi)容感興趣的朋友一起學(xué)習(xí)吧2015-11-11
AJAX的跨域與JSONP(為文章自動(dòng)添加短址的功能)
AJAX的跨域與JSONP(另送一個(gè)為文章自動(dòng)添加短址的功能)2010-01-01
JavaScript對(duì)象之間的轉(zhuǎn)換 jQuery對(duì)象和原聲DOM
jQuery對(duì)象和原聲DOM，JavaScript對(duì)象之間的轉(zhuǎn)換，學(xué)習(xí)jquery的朋友可以參考下。2011-03-03
這篇文章主要為大家詳細(xì)介紹了layui導(dǎo)航欄效果的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
jQuery實(shí)戰(zhàn)之仿淘寶商城左側(cè)導(dǎo)航效果
網(wǎng)絡(luò)上很很多這種效果的JS寫法，但是還沒有看見用jQuery寫的，效果實(shí)現(xiàn)很簡(jiǎn)單，確切的說是用jquery實(shí)現(xiàn)這個(gè)效果很簡(jiǎn)單，這就是jquery的強(qiáng)大和魅力所在。2011-04-04
Jquery的hover方法讓鼠標(biāo)經(jīng)過li時(shí)背景變色
鼠標(biāo)經(jīng)過時(shí)讓li背景變色，在某些時(shí)候還是挺實(shí)用的，下面為大家介紹下使用Jquery的hover方法來實(shí)現(xiàn)下，感興趣的朋友可以參考下2013-09-09
jquery實(shí)現(xiàn)獲取具體時(shí)間(年月日)后3個(gè)月+1天的年月日
這篇文章主要為大家詳細(xì)介紹了jquery如何實(shí)現(xiàn)獲取具體時(shí)間(年月日)后3個(gè)月+1天的年月日,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2023-11-11
JQuery+Ajax實(shí)現(xiàn)數(shù)據(jù)查詢、排序和分頁(yè)功能
這篇文章介紹了利用JQuery方便實(shí)現(xiàn)基于Ajax的數(shù)據(jù)查詢、排序和分頁(yè)功能，需要的朋友可以參考下2015-09-09