jquery中實(shí)現(xiàn)標(biāo)簽切換效果的代碼
更新時(shí)間：2011年03月01日 23:31:54 作者：
現(xiàn)在比較流行jquery插件，所以既然用了jquery那么就要用好，也不用大量的寫代碼了。
核心代碼：
$("ul > li").hover(tab);
function tab() {
$(this).addClass("ll").siblings().removeClass("ll");
var tab = $(this).attr("title");
$("#" + tab).show().siblings().hide();
};
li中和title必須和div中的id一致！
完整的代碼
<script type="text/javascript" src="jquery-132min2.js"></script>
<script type="text/javascript">
$(function() {
$("ul > li").click(tab);
function tab() {
$(this).addClass("ll").siblings().removeClass("ll");
var tab = $(this).attr("title");
$("#" + tab).show().siblings().hide();
};
});
</script>
</head>
<body>
<ul>
<li class="ll" title="d1">1</li>
<li title="d2">2</li>
<li title="d3">3</li>
</ul>
<div>
<div id="d1">11111</div>
<div id="d2" style="display:none">22222</div>
<div id="d3" style="display:none">33333</div>
</div>
簡單的jQuery標(biāo)簽頁Simple Tabs w（使用CSS及JQuery）
我知道有很多演示指導(dǎo)如何使用CSS及JQuery創(chuàng)建標(biāo)簽頁，但是我還是決定自己動(dòng)手創(chuàng)建屬于我自己的標(biāo)簽頁。當(dāng)然我并不知道技術(shù)手法上是否（與別人的）相同，但我希望這個(gè)指導(dǎo)很容易懂，甚至對于一個(gè)初學(xué)者來說搞懂它并不費(fèi)力。
原文：http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
對那些不是很熟悉JQuery的同學(xué)，請看他們的官方網(wǎng)站以獲得一個(gè)大體的概述，同時(shí)你也可以進(jìn)一步探究這些、這些、還有這些等許多關(guān)于JQuery的指導(dǎo)。
Step1. Wireframe – HTML & CSS
Wireframe: a visual representation of the structure of a web page
線框：對網(wǎng)頁安排的一種視覺上的描繪
使用無序列表（ul）來呈現(xiàn)你的標(biāo)簽，然后進(jìn)一步將一個(gè)類型（class）為”tab_container”的容器（div）放在它的下方。記住每 一個(gè)列表的項(xiàng)（tabs）都有一個(gè)”href”的屬性值和”.tab_content”div的ID名稱一致。這是十分重要的一步！因?yàn)槲覀冇?JQuery實(shí)現(xiàn)（切換標(biāo)簽頁的）動(dòng)作就要靠它。請記住我為了更容易被你們理解所以使用一般的名稱”tab1″。事實(shí)上，你必須使用關(guān)鍵字，這樣更語義化 （semantic），更有益于你的SEO（搜索引擎優(yōu)化）。
HTML
<ul class=”tabs”>
<li><a href=”#tab1″>Gallery</a></li>
<li><a href=”#tab2″>Submit</a></li>
</ul>
<div class=”tab_container”>
<div id=”tab1″ class=”tab_content”>
<!–Content–>
</div>
<div id=”tab2″ class=”tab_content”>
<!–Content–>
</div>
</div>
如果你之前曾嘗試通過CSS創(chuàng)建過標(biāo)簽頁，你可能已經(jīng)在標(biāo)簽邊框正確對齊的問題上受到過挫折，以下就是一些大部分朋友碰到的常見問題。
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*–Set height of tabs–*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*–Subtract 1px from the height of the unordered list–*/
line-height: 31px; /*–Vertically aligns the text within the tab–*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*–Pull the list item down 1px–*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*–Gives the bevel look with a 1px white border inside the list item–*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*–Makes sure that the active tab does not listen to the hover properties–*/
background: #fff;
border-bottom: 1px solid #fff; /*–Makes the active tab look like it's connected with its content—*/
}
Tab Content CSS
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
Step2. 讓標(biāo)簽動(dòng)起來 – JQuery
對那些不是很熟悉JQuery的同學(xué)，請看他們的官方網(wǎng)站以獲得一個(gè)大體的概述
以下腳本包含注釋，解釋了哪只JQuery行為（action）正在被執(zhí)行。
$(document).ready(function() {
//When page loads…
$(“.tab_content”).hide(); //Hide all content
$(“ul.tabs li:first”).addClass(“active”).show(); //Activate first tab
$(“.tab_content:first”).show(); //Show first tab content
//On Click Event
$(“ul.tabs li”).click(function() {
$(“ul.tabs li”).removeClass(“active”); //Remove any “active” class
$(this).addClass(“active”); //Add “active” class to selected tab
$(“.tab_content”).hide(); //Hide all tab content
var activeTab = $(this).find(“a”).attr(“href”); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple Tabs with CSS & jQuery</title>
<style type="text/css">
body {
background: #f0f0f0;
margin: 0;
padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
color: #444;
}
h1 {font-size: 3em; margin: 20px 0;}
.container {width: 500px; margin: 10px auto;}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 10px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
color: #254588;
}
.tab_content img {
float: left;
margin: 0 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
</head>
<body>
<div class="container">
<h1>Simple Tabs w/ CSS & jQuery</h1>
<ul class="tabs">
<li><a href="#tab1">Gallery</a></li>
<li><a href="#tab2">Submit</a></li>
<li><a href="#tab3">Resources</a></li>
<li><a href="#tab4">Contact</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2>Gallery</h2>
<a ><img src="/upload/201103/20110301233125928.gif" alt="" /></a>
<h3><a >www.DesignBombs.com</a></h3>
<p>Saw polecat than took bankrupt good hillbilly stew, crazy, fancy and hillbilly heap rodeo, pappy. Thar range saw me him sherrif nothin' shiney dirt, pigs sheep city-slickers everlastin' shotgun driveway. Promenade catfight fart fiddle jiggly gonna tarnation, fence, what quarrel dirty, if. Pot grandma crop kinfolk jezebel diesel coonskin hoosegow wirey fixin' shack good roped in. Reckon stew tax-collectors, grandpa tobaccee hayseed good wash tired caboodle burnin' landlord. </p>
<p>Smokin' driveway wrestlin' go darn truck moonshine wirey cow grandpa saw, coonskin bull, java, huntin'. </p>
<p>Stinky yonder pigs in, rustle kinfolk gonna marshal sittin' wagon, grandpa. Ya them firewood buffalo, tobaccee cabin.</p>
</div>
<div id="tab2" class="tab_content">
<h2>Submit</h2>
<a > <img src="/upload/201103/20110301233128842.gif" alt="" /></a>
<h3><a >www.DesignBombs.com</a></h3>
<p>Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler. </p>
<p>Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly. </p>
<p>Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin' cow. </p>
</div>
<div id="tab3" class="tab_content">
<h2>Resources</h2>
<a ><img src="/upload/201103/20110301233130895.gif" alt="" /></a>
<h3><a >www.DesignBombs.com</a></h3>
<p>Dirt tools thar, pot buffalo put jehosephat rent, ya pot promenade. Come pickled far greasy fightin', wirey, it poor yer, drive jig landlord. Rustle is been moonshine whomp hogtied. Stew, wirey stew cold uncle ails. Slap hoosegow road cooked, where gal pot, commencin' country. Weren't dogs backwoods, city-slickers me afford boxcar fat, dumb sittin' sittin' drive rustle slap, tornado. Fuss stinky knickers whomp ain't, city-slickers sherrif darn ignorant tobaccee round-up old buckshot that. </p>
<p>Deep-fried over shootin' a wagon cheatin' work cowpoke poor, wuz, whiskey got wirey that. Shot beer, broke kickin' havin' buckshot gritts. Drunk, em moonshine his commencin' country drunk chitlins stole. Fer tonic boxcar liar ass jug cousin simple, wuz showed yonder hee-haw drive is me. Horse country inbred wirey, skanky kinfolk. Rattler, sittin' darn skanky fence, shot huntin'.</p>
</div>
<div id="tab4" class="tab_content">
<h2>Contact</h2>
<a > <img src="/upload/201103/20110301233131829.gif" alt="" /></a>
<h3><a >www.DesignBombs.com</a></h3>
<p>Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler. </p>
<p>Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly. </p>
<p>Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin' cow. </p>
</div>
</div>
</div>
<div style="clear: both; display: block; padding: 10px 0; text-align:center;"><a >Simple Tabs w/ CSS & jQuery</a> by Soh Tanaka. Check out his <a >Web Design Blog</a> for more tutorials!</div>
</body>
</html>
復(fù)制代碼 代碼如下:
$("ul > li").hover(tab);
function tab() {
$(this).addClass("ll").siblings().removeClass("ll");
var tab = $(this).attr("title");
$("#" + tab).show().siblings().hide();
};
li中和title必須和div中的id一致！
完整的代碼
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="jquery-132min2.js"></script>
<script type="text/javascript">
$(function() {
$("ul > li").click(tab);
function tab() {
$(this).addClass("ll").siblings().removeClass("ll");
var tab = $(this).attr("title");
$("#" + tab).show().siblings().hide();
};
});
</script>
</head>
<body>
<ul>
<li class="ll" title="d1">1</li>
<li title="d2">2</li>
<li title="d3">3</li>
</ul>
<div>
<div id="d1">11111</div>
<div id="d2" style="display:none">22222</div>
<div id="d3" style="display:none">33333</div>
</div>
簡單的jQuery標(biāo)簽頁Simple Tabs w（使用CSS及JQuery）
我知道有很多演示指導(dǎo)如何使用CSS及JQuery創(chuàng)建標(biāo)簽頁，但是我還是決定自己動(dòng)手創(chuàng)建屬于我自己的標(biāo)簽頁。當(dāng)然我并不知道技術(shù)手法上是否（與別人的）相同，但我希望這個(gè)指導(dǎo)很容易懂，甚至對于一個(gè)初學(xué)者來說搞懂它并不費(fèi)力。
原文：http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
對那些不是很熟悉JQuery的同學(xué)，請看他們的官方網(wǎng)站以獲得一個(gè)大體的概述，同時(shí)你也可以進(jìn)一步探究這些、這些、還有這些等許多關(guān)于JQuery的指導(dǎo)。
Step1. Wireframe – HTML & CSS
Wireframe: a visual representation of the structure of a web page
線框：對網(wǎng)頁安排的一種視覺上的描繪
使用無序列表（ul）來呈現(xiàn)你的標(biāo)簽，然后進(jìn)一步將一個(gè)類型（class）為”tab_container”的容器（div）放在它的下方。記住每 一個(gè)列表的項(xiàng)（tabs）都有一個(gè)”href”的屬性值和”.tab_content”div的ID名稱一致。這是十分重要的一步！因?yàn)槲覀冇?JQuery實(shí)現(xiàn)（切換標(biāo)簽頁的）動(dòng)作就要靠它。請記住我為了更容易被你們理解所以使用一般的名稱”tab1″。事實(shí)上，你必須使用關(guān)鍵字，這樣更語義化 （semantic），更有益于你的SEO（搜索引擎優(yōu)化）。
HTML
復(fù)制代碼 代碼如下:
<ul class=”tabs”>
<li><a href=”#tab1″>Gallery</a></li>
<li><a href=”#tab2″>Submit</a></li>
</ul>
<div class=”tab_container”>
<div id=”tab1″ class=”tab_content”>
<!–Content–>
</div>
<div id=”tab2″ class=”tab_content”>
<!–Content–>
</div>
</div>
如果你之前曾嘗試通過CSS創(chuàng)建過標(biāo)簽頁，你可能已經(jīng)在標(biāo)簽邊框正確對齊的問題上受到過挫折，以下就是一些大部分朋友碰到的常見問題。
這里我想出來一個(gè)解決方案能處理這個(gè)討厭的問題。請看看下面的圖片然后看一下CSS，以及它邊上的輔助注釋，以便更好的理解。
復(fù)制代碼 代碼如下:
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*–Set height of tabs–*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*–Subtract 1px from the height of the unordered list–*/
line-height: 31px; /*–Vertically aligns the text within the tab–*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*–Pull the list item down 1px–*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*–Gives the bevel look with a 1px white border inside the list item–*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*–Makes sure that the active tab does not listen to the hover properties–*/
background: #fff;
border-bottom: 1px solid #fff; /*–Makes the active tab look like it's connected with its content—*/
}
Tab Content CSS
復(fù)制代碼 代碼如下:
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
Step2. 讓標(biāo)簽動(dòng)起來 – JQuery
對那些不是很熟悉JQuery的同學(xué)，請看他們的官方網(wǎng)站以獲得一個(gè)大體的概述
以下腳本包含注釋，解釋了哪只JQuery行為（action）正在被執(zhí)行。
復(fù)制代碼 代碼如下:
$(document).ready(function() {
//When page loads…
$(“.tab_content”).hide(); //Hide all content
$(“ul.tabs li:first”).addClass(“active”).show(); //Activate first tab
$(“.tab_content:first”).show(); //Show first tab content
//On Click Event
$(“ul.tabs li”).click(function() {
$(“ul.tabs li”).removeClass(“active”); //Remove any “active” class
$(this).addClass(“active”); //Add “active” class to selected tab
$(“.tab_content”).hide(); //Hide all tab content
var activeTab = $(this).find(“a”).attr(“href”); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
最后
最終你完成了它，一個(gè)用CSS及JQuery制作的美麗而簡單的標(biāo)簽功能。如果你有任何問題，評(píng)論，或者建議請隨便讓我知曉！
完整的演示代碼:
復(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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple Tabs with CSS & jQuery</title>
<style type="text/css">
body {
background: #f0f0f0;
margin: 0;
padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
color: #444;
}
h1 {font-size: 3em; margin: 20px 0;}
.container {width: 500px; margin: 10px auto;}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 10px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
color: #254588;
}
.tab_content img {
float: left;
margin: 0 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
</head>
<body>
<div class="container">
<h1>Simple Tabs w/ CSS & jQuery</h1>
<ul class="tabs">
<li><a href="#tab1">Gallery</a></li>
<li><a href="#tab2">Submit</a></li>
<li><a href="#tab3">Resources</a></li>
<li><a href="#tab4">Contact</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2>Gallery</h2>
<a ><img src="/upload/201103/20110301233125928.gif" alt="" /></a>
<h3><a >www.DesignBombs.com</a></h3>
<p>Saw polecat than took bankrupt good hillbilly stew, crazy, fancy and hillbilly heap rodeo, pappy. Thar range saw me him sherrif nothin' shiney dirt, pigs sheep city-slickers everlastin' shotgun driveway. Promenade catfight fart fiddle jiggly gonna tarnation, fence, what quarrel dirty, if. Pot grandma crop kinfolk jezebel diesel coonskin hoosegow wirey fixin' shack good roped in. Reckon stew tax-collectors, grandpa tobaccee hayseed good wash tired caboodle burnin' landlord. </p>
<p>Smokin' driveway wrestlin' go darn truck moonshine wirey cow grandpa saw, coonskin bull, java, huntin'. </p>
<p>Stinky yonder pigs in, rustle kinfolk gonna marshal sittin' wagon, grandpa. Ya them firewood buffalo, tobaccee cabin.</p>
</div>
<div id="tab2" class="tab_content">
<h2>Submit</h2>
<a > <img src="/upload/201103/20110301233128842.gif" alt="" /></a>
<h3><a >www.DesignBombs.com</a></h3>
<p>Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler. </p>
<p>Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly. </p>
<p>Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin' cow. </p>
</div>
<div id="tab3" class="tab_content">
<h2>Resources</h2>
<a ><img src="/upload/201103/20110301233130895.gif" alt="" /></a>
<h3><a >www.DesignBombs.com</a></h3>
<p>Dirt tools thar, pot buffalo put jehosephat rent, ya pot promenade. Come pickled far greasy fightin', wirey, it poor yer, drive jig landlord. Rustle is been moonshine whomp hogtied. Stew, wirey stew cold uncle ails. Slap hoosegow road cooked, where gal pot, commencin' country. Weren't dogs backwoods, city-slickers me afford boxcar fat, dumb sittin' sittin' drive rustle slap, tornado. Fuss stinky knickers whomp ain't, city-slickers sherrif darn ignorant tobaccee round-up old buckshot that. </p>
<p>Deep-fried over shootin' a wagon cheatin' work cowpoke poor, wuz, whiskey got wirey that. Shot beer, broke kickin' havin' buckshot gritts. Drunk, em moonshine his commencin' country drunk chitlins stole. Fer tonic boxcar liar ass jug cousin simple, wuz showed yonder hee-haw drive is me. Horse country inbred wirey, skanky kinfolk. Rattler, sittin' darn skanky fence, shot huntin'.</p>
</div>
<div id="tab4" class="tab_content">
<h2>Contact</h2>
<a > <img src="/upload/201103/20110301233131829.gif" alt="" /></a>
<h3><a >www.DesignBombs.com</a></h3>
<p>Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler. </p>
<p>Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly. </p>
<p>Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin' cow. </p>
</div>
</div>
</div>
<div style="clear: both; display: block; padding: 10px 0; text-align:center;"><a >Simple Tabs w/ CSS & jQuery</a> by Soh Tanaka. Check out his <a >Web Design Blog</a> for more tutorials!</div>
</body>
</html>
您可能感興趣的文章:
- jQuery+css實(shí)現(xiàn)的tab切換標(biāo)簽(兼容各瀏覽器)
- jQuery+CSS實(shí)現(xiàn)滑動(dòng)的標(biāo)簽分欄切換效果
- jQuery實(shí)現(xiàn)平滑滾動(dòng)的標(biāo)簽分欄切換效果
- jQuery版Tab標(biāo)簽切換
- DIY jquery plugin - tabs標(biāo)簽切換實(shí)現(xiàn)代碼
- JQuery學(xué)習(xí)筆記 實(shí)現(xiàn)圖片翻轉(zhuǎn)效果和TAB標(biāo)簽切換效果
- 基于jQuery實(shí)現(xiàn)多標(biāo)簽頁切換的效果(web前端開發(fā))
相關(guān)文章
這篇文章主要介紹了簡單的jQuery banner圖片輪播實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-03-03
jquery操作checkbox火狐下第二次無法勾選的解決方法
這篇文章主要介紹了jquery操作checkbox火狐下第二次無法勾選問題的解決方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了jQuery中的子元素過濾選擇器,列舉了一些操作DOM時(shí)獲取父元素的一些方法,需要的朋友可以參考下2016-04-04
使用jQuery仿蘋果官網(wǎng)焦點(diǎn)圖特效
這篇文章主要介紹了使用jQuery仿蘋果官網(wǎng)焦點(diǎn)圖特效,非常的炫酷，需要的朋友可以參考下2014-12-12
測類、方法、變量或?qū)傩允欠褚汛嬖?，這是Javascript編程基礎(chǔ)知識(shí)。在這里我們就是要檢測jQuery()或$()函數(shù)是否存在2011-05-05
jquery是javascript的類庫，提供了大量的javascript的類庫和API，方便javascript開發(fā)。2010-04-04
jQuery實(shí)現(xiàn)的產(chǎn)品自動(dòng)360度旋轉(zhuǎn)展示特效源碼分享
這篇文章主要展示了jQuery實(shí)現(xiàn)的產(chǎn)品自動(dòng)360度旋轉(zhuǎn)展示特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
jquery過濾特殊字符'',防sql注入的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query過濾特殊字符',防sql注入的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
使用jQuery.Pin垂直滾動(dòng)時(shí)固定導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了使用jQuery.Pin垂直滾動(dòng)時(shí)固定導(dǎo)航的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
基于jQuery ligerUI實(shí)現(xiàn)分頁樣式
這篇文章主要為大家詳細(xì)介紹了基于jQuery ligerUI實(shí)現(xiàn)分頁樣式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09