jquery slider选项卡标签标题内容滑动切换插件


jquery slider选项卡标签标题内容滑动切换插件
jquery slider选项卡标签标题内容滑动切换插件以及选项卡标签标题、内容滑动切换等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script src="js/organictabs.jquery.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font:12px Georgia, serif;}
a{text-decoration:none;}
a:focus{outline:0;}
#page-wrap{width:560px;margin:80px auto;}
#page-wrap p{font-size:12px;margin:0 0 20px 0;}
h1{font:bold 40px Sans-Serif;margin:0 0 20px 0;}
/* Generic Utility */
.hide{position:absolute;top:-9999px;left:-9999px;}
/* Specific to example one */
#example-one{background:#eee;padding:10px;margin:0 0 20px 0;-moz-box-shadow:0 0 5px #666;-webkit-box-shadow:0 0 5px #666;}
#example-one .nav{overflow:hidden;margin:0 0 10px 0;}
#example-one .nav li{width:120px;float:left;margin:0 10px 0 0;}
#example-one .nav li.last{margin-right:0;}
#example-one .nav li a{display:block;padding:5px;background:#959290;color:white;font-size:10px;text-align:center;border:0;}
#example-one .nav li a:hover{background-color:#111;}
#example-one ul{list-style:none;}
#example-one ul li a{display:block;border-bottom:1px solid #666;padding:4px;color:#666;}
#example-one ul li a:hover{background:#fe4902;color:white;}
#example-one ul li:last-child a{border:none;}
#example-one ul li.nav-one a.current, #example-one ul.featured li a:hover{background-color:#0575f4;color:white;}
#example-one ul li.nav-two a.current, #example-one ul.core li a:hover{background-color:#d30000;color:white;}
#example-one ul li.nav-three a.current, #example-one ul.jquerytuts li a:hover{background-color:#8d01b0;color:white;}
#example-one ul li.nav-four a.current, #example-one ul.classics li a:hover{background-color:#FE4902;color:white;}
/* Specific to example two */
#example-two .list-wrap{background:#eee;padding:10px;margin:0 0 15px 0;}
#example-two ul{list-style:none;}
#example-two ul li a{display:block;border-bottom:1px solid #666;padding:4px;color:#666;}
#example-two ul li a:hover{background:#333;color:white;}
#example-two ul li:last-child a{border:none;}
#example-two .nav{overflow:hidden;}
#example-two .nav li{width:120px;float:left;margin:0 10px 0 0;}
#example-two .nav li.last{margin-right:0;}
#example-two .nav li a{display:block;padding:5px;background:#666;color:white;font-size:10px;text-align:center;border:0;}
#example-two li a.current,#example-two li a.current:hover{background-color:#eee !important;color:black;}
#example-two .nav li a:hover, #example-two .nav li a:focus{background:#999;}
</style>
<div id="page-wrap">
<h1>jquery选项卡插件</h1>
<p>此演示的目的是为了显示选项卡式面板的内容是一个标签区不同的高度。当我们在标签之间切换,下面的内容是轻轻向上移动或向下以适应。</p>
<div id="example-one">
	<ul class="nav">
		<li class="nav-one"><a href="#featured" class="current">jquery表单特效</a></li>
		<li class="nav-two"><a href="#core">jquery表格特效</a></li>
		<li class="nav-three"><a href="#jquerytuts">flash图片特效</a></li>
		<li class="nav-four last"><a href="#classics">flash导航条</a></li>
	</ul>
	<div class="list-wrap">		
		<ul id="featured">
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		</ul>
		<ul id="core" class="hide">
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		</ul>
		<ul id="jquerytuts" class="hide">
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		</ul>
		<ul id="classics" class="hide">
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		</ul>
    </div> <!-- END List Wrap -->
 </div> <!-- END Organic Tabs (Example One) -->
 <p>这是一个插件,所以你可以调用多个标签领域,可以完全不同的风格</p>
 <div id="example-two">
	<ul class="nav">
		<li class="nav-one"><a href="#featured2" class="current">css3教程</a></li>
		<li class="nav-two"><a href="#core2">div+css菜单</a></li>
		<li class="nav-three"><a href="#jquerytuts2">div+css布局</a></li>
		<li class="nav-four last"><a href="#classics2">js图片特效</a></li>
	</ul>
	<div class="list-wrap">
		<ul id="featured2">
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		</ul>
		<ul id="core2" class="hide">
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		</ul>
		 <ul id="jquerytuts2" class="hide">
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		</ul>
		 <ul id="classics2" class="hide">
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		</ul>
    </div> <!-- END List Wrap -->
 </div> <!-- END Organic Tabs (Example One) -->
 <p>这是下面的一些标签的内容。我会被移动或向下,以适应我上面的标签面积。</p>
</div>

相关推荐

发表评论

相关文章