jquery 滑动选项卡实例效果代码
2013-09-05 20:23
666 查看
多国外网站抓下来的jquery 滑动选项卡代码，我们一步步告诉你如何***出如此漂亮的tab选项卡的切换代码。<!-- 多国外网站抓下来的jquery 滑动选项卡代码，我们一步步告诉你如何***出如此漂亮的tab选项卡的切换代码。
<!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" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>jquery 滑动选项卡实例效果代码</title>
<link rel="stylesheet" href="css教程/general.css" type="text/css" media="screen" />
<!--[if ie 6]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen," />
<![endif]>
</head>
<body>
<a id="logo" title="go to yensdesign.com!" href="http://www.yensdesign.com"><img src="css/images/logo.jpg" alt="yensdesign.com" /></a>
<div id="container">
<ul class="menu">
<li id="news" class="active">news</li>
<li id="tutorials">tutorials</li>
<li id="links">links</li>
</ul>
<span class="clear"></span>
<div class="content news">
<h1>latest news</h1>
<ul>
<li><img src="css/images/bullet.gif" alt="-" /> boobles: first theme on themeforest released!</li>
<li><img src="css/images/bullet.gif" alt="-" /> cokidoo becomes official</li>
<li><img src="css/images/bullet.gif" alt="-" /> plusmusica.com private beta invitations</li>
<li><img src="css/images/bullet.gif" alt="-" /> yensdesign.com 2.0 launched!</li>
<ul>
</div>
<div class="content tutorials">
<h1>latest tutorials</h1>
<ul>
<li><img src="css/images/bullet.gif" alt="-" /> top 10 free fonts for professional design</li>
<li><img src="css/images/bullet.gif" alt="-" /> create an amazing music player using mouse gestures &amp;amp;amp; hotkeys</li>
<li><img src="css/images/bullet.gif" alt="-" /> boobles: first theme on themeforest released!</li>
<li><img src="css/images/bullet.gif" alt="-" /> creating ajax websites based on anchor navigation</li>
<li><img src="css/images/bullet.gif" alt="-" /> fast tip: create your personal blog to promote your self</li>
<li><img src="css/images/bullet.gif" alt="-" /> how to make a brilliant mysql教程 forum database from scratch</li>
<ul>
</div>
<div class="content links">
<h1>you may visit</h1>
<ul>
<li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.plusmusica.com">www.plusmusica.com</a> - online jukebox!</li>
<li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.cokidoo.com">www.cokidoo.com</a> - awesome startup! :)</li>
<li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.cokidoo.com">www.pixelartgames.com</a> - do you want pixel art games? ;)</li>
<li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.dmsconsulting.es">www.dmsconsulting.es</a> - great guys</li>
<ul>
</div>
</div>
<script type="text/网页特效" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="tabs.js"></script>
</body>
</html>
没有什么可以评论在这里...让我们跳进css的一部分。
第2步：添加与css样式
在这里有一个必须说的小动作：我们要创造3 2班，各部门共同的类称为：内容和每个部分单独的类。因此，我们将有这些分歧：
新闻内容
内容教程
内容链接
我们重用的类称为"内容"，并加入了第二类（新闻，教程或链接），以相同的内容的部门，改变每节一些小细节。这样做可以保存在您的布局的css代码很多。
@charset "utf-8";
/******* general reset *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background: #fff;
line-height:14px;
font-size: 12px;
font-family: arial, verdana, helvetica, sans-serif;
margin:0pt;
cursor:default;
overflow: hidden;
}
html,body{
height:100%;
text-align: center;
}
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
a{
text-decoration: none;
}
/******* general reset *******/
/******* logo *******/
#logo{
margin-top: 1em;
display: block;
}
/******* /logo *******/
/******* menu *******/
#container{
margin: 7em auto;
width: 400px;
}
#container ul{
list-style: none;
list-style-position: outside;
}
#container ul.menu li{
float: left;
margin-right: 5px;
margin-bottom: -1px;
}
#container ul.menu li{
font-weight: 700;
display: block;
padding: 5px 10px 5px 10px;
background: #efefef;
margin-bottom: -1px;
border: 1px solid #d0ccc9;
border-width: 1px 1px 1px 1px;
position: relative;
color: #898989;
cursor: pointer;
}
#container ul.menu li.active{
background: #fff;
top: 1px;
border-bottom: 0;
color: #5f95ef;
}
/******* /menu *******/
/******* content *******/
.content{
margin: 0pt auto;
background: #efefef;
background: #fff;
border: 1px solid #d0ccc9;
text-align: left;
padding: 10px;
padding-bottom: 20px;
font-size: 11px;
}
.content h1{
line-height: 1em;
vertical-align: middle;
height: 48px;
padding: 10px 10px 10px 52px;
font-size: 32px;
}
/******* /content *******/
/******* news *******/
.content.news h1{
background: transparent url(images/news.jpg) no-repeat scroll left top;
}
.content.news{
display: block;
}
/******* /news *******/
/******* tutorials *******/
.content.tutorials h1{
background: transparent url(images/tuts.jpg) no-repeat scroll left top;
}
.content.tutorials{
display: none;
}
/******* /tutorials *******/
/******* links *******/
.content.links h1{
background: transparent url(images/links.jpg) no-repeat scroll left top;
}
.content.links{
display: none;
}
.content.links a{
color: #5f95ef;
}
/******* /links *******/
正如你所看到的，我们要显示和隐藏的新闻节默认的休息，然后我们将用jquery可以显示/隐藏使用事件。
第3步：添加jquery的魔力我们标签菜单
首先需要在events.js代码所示：
/***************************/
//@author: adrian "yens" mato gondelle &amp; ivan guardado castro
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: feel free to use it, but keep this credits please!
/***************************/
$(document).ready(function(){
$(".menu > li").click(function(e){
switch(e.target.id){
case "news":
//change status &amp; style menu
$("#news").addclass("active");
$("#tutorials").removeclass("active");
$("#links").removeclass("active");
//display selected division, hide others
$("div.news").fadein();
$("div.tutorials").css("display", "none");
$("div.links").css("display", "none");
break;
case "tutorials":
//change status &amp; style menu
$("#news").removeclass("active");
$("#tutorials").addclass("active");
$("#links").removeclass("active");
//display selected division, hide others
$("div.tutorials").fadein();
$("div.news").css("display", "none");
$("div.links").css("display", "none");
break;
case "links":
//change status &amp; style menu
$("#news").removeclass("active");
$("#tutorials").removeclass("active");
$("#links").addclass("active");
//display selected division, hide others
$("div.links").fadein();
$("div.news").css("display", "none");
$("div.tutorials").css("display", "none");
break;
}
//alert(e.target.id);
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" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>jquery 滑动选项卡实例效果代码</title>
<link rel="stylesheet" href="css教程/general.css" type="text/css" media="screen" />
<!--[if ie 6]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen," />
<![endif]>
</head>
<body>
<a id="logo" title="go to yensdesign.com!" href="http://www.yensdesign.com"><img src="css/images/logo.jpg" alt="yensdesign.com" /></a>
<div id="container">
<ul class="menu">
<li id="news" class="active">news</li>
<li id="tutorials">tutorials</li>
<li id="links">links</li>
</ul>
<span class="clear"></span>
<div class="content news">
<h1>latest news</h1>
<ul>
<li><img src="css/images/bullet.gif" alt="-" /> boobles: first theme on themeforest released!</li>
<li><img src="css/images/bullet.gif" alt="-" /> cokidoo becomes official</li>
<li><img src="css/images/bullet.gif" alt="-" /> plusmusica.com private beta invitations</li>
<li><img src="css/images/bullet.gif" alt="-" /> yensdesign.com 2.0 launched!</li>
<ul>
</div>
<div class="content tutorials">
<h1>latest tutorials</h1>
<ul>
<li><img src="css/images/bullet.gif" alt="-" /> top 10 free fonts for professional design</li>
<li><img src="css/images/bullet.gif" alt="-" /> create an amazing music player using mouse gestures &amp;amp;amp; hotkeys</li>
<li><img src="css/images/bullet.gif" alt="-" /> boobles: first theme on themeforest released!</li>
<li><img src="css/images/bullet.gif" alt="-" /> creating ajax websites based on anchor navigation</li>
<li><img src="css/images/bullet.gif" alt="-" /> fast tip: create your personal blog to promote your self</li>
<li><img src="css/images/bullet.gif" alt="-" /> how to make a brilliant mysql教程 forum database from scratch</li>
<ul>
</div>
<div class="content links">
<h1>you may visit</h1>
<ul>
<li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.plusmusica.com">www.plusmusica.com</a> - online jukebox!</li>
<li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.cokidoo.com">www.cokidoo.com</a> - awesome startup! :)</li>
<li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.cokidoo.com">www.pixelartgames.com</a> - do you want pixel art games? ;)</li>
<li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.dmsconsulting.es">www.dmsconsulting.es</a> - great guys</li>
<ul>
</div>
</div>
<script type="text/网页特效" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="tabs.js"></script>
</body>
</html>
没有什么可以评论在这里...让我们跳进css的一部分。
第2步：添加与css样式
在这里有一个必须说的小动作：我们要创造3 2班，各部门共同的类称为：内容和每个部分单独的类。因此，我们将有这些分歧：
新闻内容
内容教程
内容链接
我们重用的类称为"内容"，并加入了第二类（新闻，教程或链接），以相同的内容的部门，改变每节一些小细节。这样做可以保存在您的布局的css代码很多。
@charset "utf-8";
/******* general reset *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background: #fff;
line-height:14px;
font-size: 12px;
font-family: arial, verdana, helvetica, sans-serif;
margin:0pt;
cursor:default;
overflow: hidden;
}
html,body{
height:100%;
text-align: center;
}
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
a{
text-decoration: none;
}
/******* general reset *******/
/******* logo *******/
#logo{
margin-top: 1em;
display: block;
}
/******* /logo *******/
/******* menu *******/
#container{
margin: 7em auto;
width: 400px;
}
#container ul{
list-style: none;
list-style-position: outside;
}
#container ul.menu li{
float: left;
margin-right: 5px;
margin-bottom: -1px;
}
#container ul.menu li{
font-weight: 700;
display: block;
padding: 5px 10px 5px 10px;
background: #efefef;
margin-bottom: -1px;
border: 1px solid #d0ccc9;
border-width: 1px 1px 1px 1px;
position: relative;
color: #898989;
cursor: pointer;
}
#container ul.menu li.active{
background: #fff;
top: 1px;
border-bottom: 0;
color: #5f95ef;
}
/******* /menu *******/
/******* content *******/
.content{
margin: 0pt auto;
background: #efefef;
background: #fff;
border: 1px solid #d0ccc9;
text-align: left;
padding: 10px;
padding-bottom: 20px;
font-size: 11px;
}
.content h1{
line-height: 1em;
vertical-align: middle;
height: 48px;
padding: 10px 10px 10px 52px;
font-size: 32px;
}
/******* /content *******/
/******* news *******/
.content.news h1{
background: transparent url(images/news.jpg) no-repeat scroll left top;
}
.content.news{
display: block;
}
/******* /news *******/
/******* tutorials *******/
.content.tutorials h1{
background: transparent url(images/tuts.jpg) no-repeat scroll left top;
}
.content.tutorials{
display: none;
}
/******* /tutorials *******/
/******* links *******/
.content.links h1{
background: transparent url(images/links.jpg) no-repeat scroll left top;
}
.content.links{
display: none;
}
.content.links a{
color: #5f95ef;
}
/******* /links *******/
正如你所看到的，我们要显示和隐藏的新闻节默认的休息，然后我们将用jquery可以显示/隐藏使用事件。
第3步：添加jquery的魔力我们标签菜单
首先需要在events.js代码所示：
/***************************/
//@author: adrian "yens" mato gondelle &amp; ivan guardado castro
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: feel free to use it, but keep this credits please!
/***************************/
$(document).ready(function(){
$(".menu > li").click(function(e){
switch(e.target.id){
case "news":
//change status &amp; style menu
$("#news").addclass("active");
$("#tutorials").removeclass("active");
$("#links").removeclass("active");
//display selected division, hide others
$("div.news").fadein();
$("div.tutorials").css("display", "none");
$("div.links").css("display", "none");
break;
case "tutorials":
//change status &amp; style menu
$("#news").removeclass("active");
$("#tutorials").addclass("active");
$("#links").removeclass("active");
//display selected division, hide others
$("div.tutorials").fadein();
$("div.news").css("display", "none");
$("div.links").css("display", "none");
break;
case "links":
//change status &amp; style menu
$("#news").removeclass("active");
$("#tutorials").removeclass("active");
$("#links").addclass("active");
//display selected division, hide others
$("div.links").fadein();
$("div.news").css("display", "none");
$("div.tutorials").css("display", "none");
break;
}
//alert(e.target.id);
return false;
});
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery多选项卡效果实例代码(附效果图)
- jquery多选项卡效果实例代码(附效果图)
- 基于jQuery实现的仿百度首页滑动选项卡效果代码
- 二款实例Jquery tab选项卡效果代码
- 基于jQuery实现的仿百度首页滑动选项卡效果代码
- 代码简洁的上方滑动门(选项卡tab)jquery插件可重复使用，淡入淡出效果(用)
- jQuery实现拖动效果的实例代码
- jQuery实现的多滑动门，多选项卡效果代码
- jQuery实现自动左右滚动效果的代码实例
- PSD转HTML实例教程——利用JQuery插件实现图片滑动效果
- Jquery---用jQuery实现的智能隐藏、滑动效果的返回顶部代码
- jQuery 代码的层定位滑动动画效果
- jquery实现超简洁的TAB选项卡效果代码
- 57、实例 使用jQuery设计滑动显隐效果
- jquery仿凡客诚品图片切换的效果实例代码
- jQuery滑动到底部加载下一页数据的实例代码
- 用jQuery实现的智能隐藏、滑动效果的返回顶部代码
- 两个完整的jquery slide多方面滑动效果实例