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);
//延遲是為了減少服務器壓力，防止鼠標快速滑動
timeId = setTimeout(function(){
//將原來顯示的div隱藏掉
$("div.myDiv").removeClass("myDiv");
//將原來的li的myLi去掉
$("li.myLi").removeClass("myLi");
//顯示當前鼠標li的對應的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程序設計有所幫助。
相關文章
如今，jQuery插件眾多，滿足各種各樣的應用需求。 在這篇文章中，我收集了9款很棒的插件，最喜歡的是Sausage內(nèi)容分頁插件，作者想法特別新穎！希望你能從中找到自己需要的插件。2011-05-05
jQuery中的鏈式操作，它讓代碼變得更有層次更簡潔，所以這篇文章主要給大家介紹了關于jQuery鏈式編程風格的相關資料,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了jQuery中ajax的load()方法用法,以實例形式較為詳細的分析了load()方法的功能、參數(shù)及使用技巧,是非常實用的技巧,需要的朋友可以參考下2014-12-12
jQuery+css實現(xiàn)炫目的動態(tài)塊漂移效果
這篇文章主要介紹了jQuery+css實現(xiàn)的動態(tài)塊漂移效果,涉及jQuery基于隨機數(shù)與時間函數(shù)動態(tài)操作頁面元素樣式的相關技巧,需要的朋友可以參考下2016-01-01
Jquey拖拽控件Draggable使用方法(asp.net環(huán)境)
使用時首先依次引用Jquery，Jquery-Ui ，Draggable三個Js。然后在js中編寫相應的代碼，相關代碼說明請看程序中的注釋。2010-09-09
通過添加 CSS 類改變元素的外觀和感覺，非常干凈的方法，而不是添加內(nèi)聯(lián)樣式。2011-08-08
Ajax使用的關鍵對象是XmlHttpRequest對象，但是涉及到跨瀏覽器的的問題，所以，需要創(chuàng)建一個具兼容性的對象2011-04-04
本文主要介紹了jquery手勢密碼插件的相關知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
基于Jquery 解決Ajax請求的頁面 瀏覽器后退前進功能，頁面刷新功能實效問題
做了幾個兼職，上天幫人完成頁面的時候順便做了一個ajax的請求。發(fā)現(xiàn)瀏覽器的刷新，后退，前進按鈕失效。于是乎google了一下。2010-12-12
jquery實現(xiàn)簡單的拖拽效果實例兼容所有主流瀏覽器(優(yōu)化篇)
相對于上一篇，優(yōu)化了拖拽的效果，具體的代碼及截圖如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06