当前位置：首页 > 网页特效 > css样式 >

CSS3 jQuery代码实现的TAB菜单

时间：2013-11-19 16:25 来源：互联网作者：源码搜藏收藏推荐

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery CSS3tab选项卡切换效果</title>
<style>
body{background: #eee;margin: 0;padding: 0;font-family: Helvetica,Arial,sans-serif;font-size: 11px;}
.example{position: relative;background: url("http://www.codefans.net/jscss/demoimg/201311/background.jpg") no-repeat scroll center center #fff;width: 640px;height: 586px;border: 1px #000 solid;margin: 20px auto;padding: 5px 0;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;}
#tabs-container{clear: both;font-size: 11px;height: 26px;margin: 0 auto;padding: 0}
.tabs li{float: left;list-style: none;position: relative}
.tabs li a: first-child{margin-left: 10px}
.tabs li a{background: #f3f3f3;border: none;border-left: 1px solid #d5d5d5;border-right: 1px solid #d5d5d5;border-top: 1px solid #d5d5d5;color: #333;display: block;margin: 0 2px 0 0;padding: 6px 10px 4px}
.tabs li.active a{-webkit-border-radius: 4px 4px 0 0;background: #fff;border-bottom: 1px solid #fff;border-left: 1px solid #d5d5d5;border-radius: 4px 4px 0 0;border-right: 1px solid #d5d5d5;border-top: 1px solid #d5d5d5;color: #222;display: block;padding: 6px 10px 4px}
.tabs li.child a{-webkit-border-radius: 0 4px 0 0;background: #f3f3f3;border-radius: 0 4px 0 0;color: #333;display: block;margin: 0;padding: 6px 10px 4px}
.tabs li a: hover{background: #fafafa;border-bottom: 1px solid #d5d5d5;color:blue;text-decoration: none}
.tabs{display: block;margin: 0;padding: 1px 0 2px;position: absolute;z-index: 100}
.tabs > li > a: hover{background: #ececec;color: #222}
.tabs > li.active > a: hover{-moz-border-radius: 3px 3px 0 0;-webkit-border-radius: 3px 3px 0 0;background: #fff;border-bottom: 1px solid #fff;border-radius: 3px 3px 0 0;color: #222}
#nav-container{border-bottom: 1px solid #d5d5d5;border-top: 1px solid #d5d5d5;clear: both;font-size: 11px;height: 33px;margin: 0 auto;padding: 0}
.nav li{float: left;list-style: none;position: relative}
.nav li a{border: none;color: #222;display: block;margin: 0 5px 0 0;padding: 5px 20px 5px 8px}
.nav{display: block;margin: 0;padding: 5px 0 2px;position: absolute;z-index: 100}
.nav > li > a: hover{-moz-border-radius: 3px 3px 0 0;-webkit-border-radius: 3px 3px 0 0;border-radius: 3px 3px 0 0;padding: 5px 20px 5px 8px}
.nav li ul{-moz-border-radius-bottomleft: 3px;-moz-border-radius-bottomright: 3px;-moz-border-radius-topright: 3px;-moz-box-shadow: 1px 1px 1px #333;-webkit-border-bottom-right-radius: 3px;-webkit-box-shadow: 1px 1px 1px #333;background: #507aa5;border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;border-top-right-radius: 3px;box-shadow: 1px 1px 1px #333;color: #222;display: none;margin: 0;padding: 2px 0;position: absolute;width: 140px}
.nav li ul li{width: 100%}
.nav li ul li a{background: #507aa5;border: none;color: #fff;line-height: 25px;margin: 0;padding: 0 0 0 8px}
.nav li ul li a: hover{background: #466A90}
.nav li ul li.strong-archive a{border-top: 1px solid #466A90;font-weight: 600}
.nav li.current > a{-moz-border-radius: 3px 3px 0 0;-moz-box-shadow: 1px 1px 1px #333;-webkit-border-radius: 3px 3px 0 0;-webkit-box-shadow: 1px 1px 1px #333;border-radius: 3px 3px 0 0;box-shadow: 1px 1px 1px #333;color: blue}
.nav li: hover > ul.child{display: block}
</style>
<script type='text/javascript' src='http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
    $('.tabs li a').click(function () {
      $('.tabs li').removeClass('active');
      $(this).parent().addClass('active');
      $('.nav').hide();
      var index = $('.tabs li a').index(this);
      $('.nav').eq(index).show();
      return false;
    });
    $('.nav li').has('ul').hover(function(){
        $(this).addClass('current').children('ul').fadeIn();
    }, function() {
        $(this).removeClass('current').children('ul').hide();
    });
});
</script>
</head>
<body>
<div class="example">
<div id="tabs-container">
    <ul class="tabs">
         <li class="active"><a href="#">家用电器</a></li>
         <li><a href="#">手机通讯</a></li>
         <li><a href="#">网站制作</a></li>
         <li><a href="#">域名空间</a></li>
    </ul>
</div>
    <div id="nav-container">
        <ul class="nav" id="1">
            <li><a href="#">Home</a></li>
            <li><a href="#">Tutorials</a>
                <ul class="sub">
                    <li><a href="#">HTML / CSS</a></li>
                    <li><a href="#">JS / jQuery</a></li>
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">MySQL</a></li>
                </ul>
            </li>
            <li><a href="#">Resources</a>
                <ul class="sub">
                    <li><a href="#">XSLT</a></li>
                    <li><a href="#">Ajax</a></li>
                    <li><a href="#">HTML / CSS</a></li>
                </ul>
            </li>
            <li><a href="#">Menus #3</a>
                <ul class="sub">
                    <li><a href="#">联想</a></li>
                    <li><a href="#">三星</a></li>
                </ul>
            </li>
            <li><a href="#">Menus #4</a>
                <ul class="sub">
                    <li><a href="#">IBM</a></li>
                    <li><a href="#">link 44</a></li>
                    <li><a href="#">link 45</a></li>
                </ul>
            </li>
            <li><a href="#/">About</a></li>
            <li><a href="#">Back</a></li>
        </ul>
        <ul class="nav" id="2" style="display:none;">
            <li><a href="#">菜单5</a></li>
            <li><a href="#">菜单6</a></li>
            <li><a href="#">菜单7</a></li>
        </ul>
        <ul class="nav" id="3" style="display:none;">
            <li><a href="#">演示8</a></li>
            <li><a href="#">演示9</a></li>
            <li><a href="#">演示10</a></li>
        </ul>
        <ul class="nav" id="4" style="display:none;">
            <li><a href="#">Menus #11</a></li>
            <li><a href="#">Menus #12</a></li>
        </ul>
    </div>
    <div style="clear:both"></div>
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。