Jquery 和CSS 实现的tabs选项卡功能

原创 2013年12月04日 23:09:44
 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于CSS3和jQuery的Tab菜单在线演示</title>
<style>
body
{
width: 700px;
margin: 100px auto 0 auto;
font-family: Arial, Helvetica;
font-size: small;
background: #444;
}
/* ------------------------------------------------- */
#tabs{
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li{
float: left;
margin: 0 .5em 0 0;
}
#tabs a{
position: relative;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);  
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.4);
box-shadow: 0 2px 2px rgba(0,0,0,.4);
}
#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
background: #fff;
}
#tabs a:focus{
outline: 0;
}
#tabs a::after{
content:'';
position:absolute;
z-index: 1;
top: 0;
right: -.5em;  
bottom: 0;
width: 1em;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);  
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-transform: skew(10deg);
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-o-transform: skew(10deg);
transform: skew(10deg);
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;  
}
#tabs #current a{
  background: #fff;
  z-index: 3;
}
#tabs #current a::after{
  background: #fff;
  z-index: 3;
}
/* ------------------------------------------------- */
#content
{
    background: #fff;
    padding: 2em;
height: 220px;
position: relative;
z-index: 2;
    -moz-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
    border-radius: 0 5px 5px 5px;
    -moz-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
#content h2, #content h3, #content p
{
    margin: 0 0 15px 0;
}
/* ------------------------------------------------- */
#about
{
    color: #999;
}
#about a
{
    color: #eee;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content
    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return       
        }
        else{             
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });
});
</script>
</head>
<body>
<ul id="tabs">
    <li><a href="#" name="tab1">One</a></li>
    <li><a href="#" name="tab2">Two</a></li>
    <li><a href="#" name="tab3">Three</a></li>
    <li><a href="#" name="tab4">Four</a></li>    
</ul>
<div id="content"> 
    <div id="tab1">
        <h2>Lorem ipsum sit amet</h2>
        <p>Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.</p>
        <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus 


vitae purus.</p>
        <h3>Pellentesque habitant</h3>
        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>    
    </div>
    <div id="tab2">
        <h2>Vivamus fringilla suscipit justo</h2>
        <p>Aenean dui nulla, egestas sit amet auctor vitae, facilisis id odio. Donec dictum gravida feugiat.</p>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras pretium elit et erat condimentum et volutpat lorem 


vehicula</p>
        <p>Morbi tincidunt pharetra orci commodo molestie. Praesent ut leo nec dolor tempor eleifend.</p>    
    </div>
    <div id="tab3">
        <h2>Phasellus non nibh</h2>
        <p>Non erat laoreet ullamcorper. Pellentesque magna metus, feugiat eu elementum sit amet, cursus sed diam. Curabitur posuere porttitor lorem, eu malesuada 


tortor faucibus sed.</p>
        <h3>Duis pulvinar nibh vel urna</h3>
        <p>Donec purus leo, porttitor eu molestie quis, porttitor sit amet ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 


himenaeos. Donec accumsan ornare elit id imperdiet. </p>
        <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. </p>
    </div>
    <div id="tab4">
        <h2>Cum sociis natoque penatibus</h2>
        <p>Magnis dis parturient montes, nascetur ridiculus mus. Nullam ac massa quis nisi porta mollis venenatis sit amet urna. Ut in mauris velit, sed bibendum 


turpis.</p>
        <p>Nam ornare vulputate risus, id volutpat elit porttitor non. In consequat nisi vel lectus dapibus sodales. Pellentesque habitant morbi tristique senectus et 


netus et malesuada fames ac turpis egestas. Praesent bibendum sagittis libero.</p>
        <h3>Imperdiet sem interdum nec</h3>
        <p>Mauris rhoncus tincidunt libero quis fringilla.</p>    
    </div>
</div>
</body>

</html> 


   纯HTML5文件 用jquery 中fade in和hide  做显示,用CSS 让界面更美观, 另外的创意 可以把div 改成iframe  这样就可以实现tabs的全功能 ,也可以做相对应的id名做 onmouseover  。 个人觉得这个CSS 做的简单 整洁 很漂亮。 

史上最牛逼的纯CSS实现tab选项卡,闪瞎你的狗眼

下载地址:http://download.csdn.net/detail/cometwo/9393614html文件 CSS3外观漂亮淡入淡出Tab菜单演示 ...
  • cometwo
  • cometwo
  • 2016年01月06日 23:06
  • 6364

【jquery】tabs选项卡切换效果(jquery版)

以前写过一篇 tabs选项卡切换效果,不过是用原生 javascript 写的,最近在学习 jquery,今天抽空用 jquery 重写了这个效果。 效果图如下: html 代码如下: ...
  • dyllove98
  • dyllove98
  • 2013年04月29日 13:32
  • 8960

jQuery+css3实现的超酷圆角tab选项卡切换效果

jQuery+css3实现的超酷圆角tab选项卡切换效果,JS代码非常简单,依靠CSS3实现了Tab选项卡标签的圆角效果,无需图片,切换流畅,绝对是未来网页发展的方向。 查看演示页面 V...
  • my98800
  • my98800
  • 2016年04月25日 15:09
  • 475

jQuery EasyUI 教程-Tabs(选项卡)

使用$.fn.tabs.defaults重写默认值对象。 选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单,包括关闭按钮和其他自定义按钮。 使...
  • suncici1101
  • suncici1101
  • 2016年07月20日 13:22
  • 2373

JqueryUI学习笔记-选项卡tabs

Insert title here $(function() { $("#tabs").tabs({ //配置当前打开的选项卡的索引,可以使用bool值或者int值,默认为1 ...
  • dc15822445347
  • dc15822445347
  • 2014年03月27日 18:26
  • 8845

【Jquery mobile】tab功能的实现

目前有两种简单的实现方式: 一,jquery mobile 的实现 jquery的tab的实现是通过在各自页面的footer添加tab项实现的,如下: 实现代码如下:   F...
  • actual_
  • actual_
  • 2011年12月01日 09:45
  • 21118

Div+CSS+JQuery轻松实现选项卡"选项卡"

body,div,ul{ padding:0; margin:0;}         #container{width:800px; margin:50px;}         .tab{ pad...
  • lyr1985
  • lyr1985
  • 2015年07月23日 10:36
  • 1359

jq选项卡的实现原理

.none{display:none;} .tab_menu{width:300px;height:30px;border:1px solid red;} .div{width:60px;heig...
  • u010861514
  • u010861514
  • 2014年11月14日 02:00
  • 1385

easyui实现tabs选项卡之间的切换(只显示一个)

一、创建菜单项 aa1 ...
  • wlangmood
  • wlangmood
  • 2017年04月20日 14:47
  • 2907

css实现选项卡功能(纯css)

css实现选项卡功能(纯css) Document *{ padding: 0; margin: 0; } body{ background: #58596b;  ...
  • v_111
  • v_111
  • 2017年04月27日 09:48
  • 302
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery 和CSS 实现的tabs选项卡功能
举报原因:
原因补充:

(最多只允许输入30个字)