基于CSS實現tab選項卡切換



39 153 52



特效描述:基于CSS實現 tab選項卡切換,基于CSS實現tab選項卡切換

代碼結構

1. 引入CSS

<link rel="stylesheet" href="styles/themes/jean/darkwash.css" media="screen" />
<link rel="stylesheet" href="styles/ie.css" media="screen" />

2. 引入JS

<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>

3. HTML代碼

<!-- Start Tab Area. Use the container for positioning and to increase the tab content width !-->
<div id="container">
<!-- Start Tabs !-->
<div class="tab-container">
<!-- Use c + the tab number or any other identifier you'd like when creating a new tab, just keep them in order.  You can have an unlimited number of tabs !-->
	<div id="c1">
		<a href="#c1" title="First">First</a> <!-- This is your actual tab and the content is below it !-->
			<div class="tab-content">  <!-- tab-container > div > div in the CSS !-->
            <h3>This is the first tab</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus.Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus ipsum nunc.</p>
			<p>Suspendisse at aliquet turpis. Phasellus eu libero euismod leo imperdiet sagittis elementum ut erat. Nam euismod risus at sem consequat vestibulum. </p>
            </div>
	</div>
	<div id="c2">
		<a href="#c2" title="Second">Second</a> <!-- This is your actual tab and the content is below it !-->
			<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
            <h3>Add as many tabs as you like</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>
			<p>Suspendisse at aliquet turpis. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>
            </div>
	</div>
	<div id="c3">
		<a href="#c3" title="Third">Third</a> <!-- This is your actual tab and the content is below it !-->
			<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
            <h3>5 Preset Styles &amp; Color Themes</h3>
            <p>Consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>
			<p>Suspendisse at aliquet turpis. Phasellus eu libero euismod leo imperdiet sagittis elementum ut erat. Nam euismod risus at sem consequat vestibulum. </p>
            </div>
	</div>
	<div id="c4">
		<a href="#c4" title="Fourth">Fourth</a> <!-- This is your actual tab and the content is below it !-->
			<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
            <h3>NO Javascript!  NO Images!</h3>
            <p>Consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>
			<p>Suspendisse at aliquet turpis. Phasellus eu libero euismod leo imperdiet sagittis elementum ut erat.</p>
            </div>
	</div>
    <div id="c5">
			<div class="tab-content"> <!-- Having a hidden or opening tab is ideal when you don't want last tab to always show first when loading the page !-->
            <h3>2 Tab Types - Regular and Newsreel</h3>
            <p>If you have an opening tab like this, it should always be last in the list of tabs otherwise it won't show first when the page loads.</p>
            <p>Text sometimes overlaps with hidden tabs in IE7 &amp; 8</p>
            </div>
	</div>
</div><!-- Tab Container !-->
</div><!-- Container !-->
<!-- End Tab Area !-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 其他 css繪制樣式 導航切換 菜單切換 文字切換 文字選項卡
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子