Jquery 實(shí)現(xiàn)Tab效果 思路是js思路
更新時(shí)間：2010年03月02日 23:30:51 作者：
Jquery 實(shí)現(xiàn)Tab效果，思路就是普通的用js的思路控制的，腳本之家發(fā)布過更精簡(jiǎn)的代碼，這個(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.fzitv.net</li><li>我和我</li></ul>
<ul class="tab2">
<li>一花一世辦</li><li>一草一天堂</li></ul>
<ul class="tab3">
<li>阿里巴巴</li><li>阿里巴巴</li><li>一草一天堂</li><li>我和我的祖國(guó)</li><li>最愛的地方</li></ul>
</div>
</body>
</html>
演示代碼 http://demo.jb51.net/js/jquery_tab/index.htm
相關(guān)文章
這篇文章主要介紹了jQuery簡(jiǎn)單自定義圖片輪播插件及用法,結(jié)合實(shí)例形式分析了jQuery基于時(shí)間函數(shù)動(dòng)態(tài)修改頁面元素屬性實(shí)現(xiàn)圖片輪播功能的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
jquery獲取并修改觸發(fā)事件的DOM元素示例【基于target 屬性】
這篇文章主要介紹了jquery獲取并修改觸發(fā)事件的DOM元素,結(jié)合實(shí)例形式分析了jQuery基于target 屬性獲取到觸發(fā)該事件的dom并修改的相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
這里給大家推薦一款瀏覽器嗅探的jQuery插件useragent，兼容各大瀏覽器，在做項(xiàng)目的時(shí)候經(jīng)常要用到，非常的實(shí)用2014-11-11
jQuery一步一步實(shí)現(xiàn)跨瀏覽器的可編輯表格，支持IE、Firefox、Safari、Chrome、Opera
在修改數(shù)據(jù)時(shí)，有時(shí)候?yàn)榱朔奖?，我們希望能夠直接在表格里面?duì)數(shù)據(jù)進(jìn)行直接修改。2009-08-08
昨天看到一個(gè)園友的blog中有個(gè)頁面下滾后出現(xiàn)用于"回到頁面頂部"按鈕的效果, 感覺挺不錯(cuò)的, 所以自己也寫了一個(gè), 用jQuery寫是再簡(jiǎn)單不過了. 下面就直接給出代碼了2011-06-06
jquery $.trim()去除字符串空格的實(shí)現(xiàn)方法【附圖例】
下面小編就為大家?guī)硪黄猨query $.trim()去除字符串空格的實(shí)現(xiàn)方法【附圖例】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-03-03
一款基jquery超炫的動(dòng)畫導(dǎo)航菜單可響應(yīng)單擊事件
。這款導(dǎo)航菜單，初始時(shí)頁面中間一個(gè)按鈕，單擊按鈕，菜單從左側(cè)飛入頁中。再次單擊按鈕，導(dǎo)航飛入左側(cè)消息2014-11-11
jQuery+ThinkPHP實(shí)現(xiàn)圖片上傳
這篇文章主要為大家詳細(xì)介紹了jQuery+ThinkPHP實(shí)現(xiàn)圖片上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
這兩天幫朋友的網(wǎng)站做個(gè)放大鏡，就是淘寶上的那種，兩個(gè)框，一個(gè)框放小圖，另外一個(gè)框放大圖。本來說想從網(wǎng)上直接載一個(gè)拿來Hack，但是找好半天都沒有找到，看了看JQ的插件也好像不對(duì)，干脆就自己寫了。2010-08-08
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10