Jquery 實(shí)現(xiàn)Tab效果 思路是js思路
更新時(shí)間:2010年03月02日 23:30:51 作者:
Jquery 實(shí)現(xiàn)Tab效果,思路就是普通的用js的思路控制的,腳本之家發(fā)布過更精簡的代碼,這個(gè)比較適合一直用js開始學(xué)用jquery控制的朋友一個(gè)參考。
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script>
<style type="text/css">
.tab
{
background-color: #FAFAFA;
margin: 5px 8px;
padding: 5px 10px;
}
.tab p span
{
background-color: #EFEFEF;
border: 1px solid #CCCCCC;
cursor: pointer;
margin-right: 6px;
padding: 2px 5px;
}
.tab p span.current
{
background-color: #FAFAFA;
border-bottom-color: #fafafa;
}
.tab p
{
border-bottom: 1px solid #CCCCCC;
font-weight: bold;
padding: 0 10px 2px;
}
.tab li
{
border-bottom: 1px dotted #CCCCCC;
padding-bottom: 3px;
margin: 5px 0;
}
.tab .mhot, .tab.allhot
{
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".tab span:first").addClass("current"); //為第一個(gè)SPAN添加當(dāng)前效果樣式
$(".tab ul:not(:first)").hide(); //隱藏其它的UL
$(".tab span").mouseover(function() {
$(".tab span").removeClass("current"); //去掉所有SPAN的樣式
$(this).addClass("current");
$(".tab ul").hide();
$("." + $(this).attr("id")).fadeIn('slow');
});
});
</script>
</head>
<body>
<div class="tab">
<p>
<span id="tab1">tab1</span> <span id="tab2">tab2</span> <span id="tab3">tab3</span></p>
<ul class="tab1">
<li>腳本之家</li><li>www.dbjr.com.cn</li><li>我和我</li></ul>
<ul class="tab2">
<li>一花一世辦</li><li>一草一天堂</li></ul>
<ul class="tab3">
<li>阿里巴巴</li><li>阿里巴巴</li><li>一草一天堂</li><li>我和我的祖國</li><li>最愛的地方</li></ul>
</div>
</body>
</html>
演示代碼 http://demo.jb51.net/js/jquery_tab/index.htm
相關(guān)文章
jQuery實(shí)現(xiàn)鼠標(biāo)跟隨效果
本文主要分享了jQuery實(shí)現(xiàn)鼠標(biāo)跟隨效果的示例代碼。具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02jQuery鼠標(biāo)經(jīng)過方形圖片切換成圓邊效果代碼分享
這篇文章主要介紹了jQuery鼠標(biāo)經(jīng)過方形圖片切換成圓邊特效,圖片可以自行替換,推薦給大家,有需要的小伙伴可以參考下。2015-08-08jquery.gridrotator實(shí)現(xiàn)響應(yīng)式圖片展示畫廊效果
本教程將教大家制作一個(gè)jQuery響應(yīng)式圖片展示畫廊效果,所有圖片以網(wǎng)格的形式排列,然后定時(shí)隨機(jī)翻轉(zhuǎn)其中某些格子用來切換圖片。這種效果可以用來當(dāng)做背景或裝飾放在我們的網(wǎng)站上。2015-06-06jQuery AJAX timeout 超時(shí)問題詳解
這篇文章主要介紹了jQuery AJAX timeout 超時(shí)問題詳解的相關(guān)資料,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06Jquery的hover方法讓鼠標(biāo)經(jīng)過li時(shí)背景變色
鼠標(biāo)經(jīng)過時(shí)讓li背景變色,在某些時(shí)候還是挺實(shí)用的,下面為大家介紹下使用Jquery的hover方法來實(shí)現(xiàn)下,感興趣的朋友可以參考下2013-09-09淺談jQuery中的$.extend方法來擴(kuò)展JSON對象
下面小編就為大家?guī)硪黄獪\談jQuery中的$.extend方法來擴(kuò)展JSON對象。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02jquery nth-child()選擇器的簡單應(yīng)用
今天項(xiàng)目中遇到過一個(gè)這樣的問題,就是希望讀出來的文章列表能夠每隔五個(gè)加一個(gè)分割條,而不是每個(gè)都加。2010-07-07基于JQuery的數(shù)字改變的動畫效果--可用來做計(jì)數(shù)器
之前用javascript做個(gè)計(jì)數(shù)器,從網(wǎng)上搜了搜,找不到合適的,就想著用jquery自己做一個(gè)2010-08-08