基于CSS实现tab选项卡切换



33 130 44



特效描述:基于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

加群请备注:从官网了解到