jquery选项卡效果

最新推荐文章于 2021-10-20 16:49:46 发布

KeevaJ

最新推荐文章于 2021-10-20 16:49:46 发布

阅读量704

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/mm9mm8/article/details/13760689

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

    <!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">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />  
    <title></title>  
    <style type="text/css">  
    body { margin:0; padding:0;background:#CCFFFF;}  
    #menubar { width:960px; margin:auto; background:#999999;}  
    .nav { margin:0; padding:0; list-style:none;}  
    .current { background:#CCCCCC;}  
    .nav li { float:left; padding:5px 15px; border-left:#333333 1px solid; border-right:#333333 1px solid; cursor:pointer;}  
    #menu_1_cont { background:#FFFF99;}  
    #menu_2_cont { background:#FFFF99;}  
    .hide { display:none;}  
    </style>  
      
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>  
    <script type="text/javascript">  
    $(document).ready(function(){  
        $("ul.nav>li").mouseenter(function(){  
            var name = $(this).attr("id");  
            $(this).addClass("current");  
            $(this).siblings().removeClass("current");  
            var contName ="#" + name + "_cont";  
            $(contName).removeClass("hide");  
            $(contName).siblings().addClass("hide");      
        });  
      
    });  
    </script>   
    </head>  
      
    <body>  
      <div id="menubar">  
            <ul class="nav">  
                <li id="menu_1"  class="current">新闻</li>  
                <li id="menu_2">动态</li>  
                
            </ul> 
			<div style="clear:both;overflow:hidden; height: 0px;font-size: 1px;"></div>  			
            <div>  
                <div id="menu_1_cont">sdfdgefgergtgdsssssss</div>  
                <div id="menu_2_cont" class="hide">13245678925357890</div>  
            </div>  
      </div>  
    </body>  
    </html>

兼容IE6/7/8/9，火狐，谷歌，safari

KeevaJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery选项卡效果

body { margin:0; padding:0;background:#CCFFFF;}#menubar { width:960px; margin:auto; background:#999999;}#nav { margin:0; padding:0; list-style:none;}.current { background:#CCCCCC;}#nav li { float:
复制链接

扫一扫

专栏目录