TAB 切换防刷新

最新推荐文章于 2024-03-30 11:48:13 发布

阿聪世家

最新推荐文章于 2024-03-30 11:48:13 发布

阅读量1.3k

点赞数

分类专栏：网站常用jquery效果

本文链接：https://blog.csdn.net/congcong875/article/details/50675583

版权

网站常用jquery效果专栏收录该内容

52 篇文章 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> 
        <title></title> 
         <link href="../Style/admin.css" rel="stylesheet" type="text/css" /> 
         <script type="text/javascript" src="System/js/jquery-1.7.min.js"></script>   
         <script type="text/javascript" src="tabs.js"></script> 
         <style type="text/css"> 
         .tabs{ list-style:none; width:400px; height:23px;}    
         .tabs  a {display:block; float:left;padding:2px 3px; background:#eff7ff; text-decoration:none;  margin-right:2px;}  
         .tabs  a.current{ background:#a1c6de; color:#000;}  
         .tab{ display:block; width:400px; height:300px; border:1px solid #ccc;}  
         </style> 
    </head> 
    <body> 
     <div class="tabs">     
       <a href="#xiangmu" >项目信息</a> <a href="#kehu">客户</a><a href="#wenda">职位提问</a> 
     </div> 
     <div id="xiangmu" class="tab">项目信息</div> 
     <div id="kehu" class="tab"> 客户</div> 
     <div id="wenda" class="tab">职位提问 </div> 
     
    </body> 
    </html>

    $(function () {  
        $("div.tab").hide(); //隐藏所有  
        $("div.tabs a:first").addClass("current"); //第一个元素选中  
        $("div.tab:first").show(); //第一个内容显示  
     
        $("div.tabs a").click(function () {  
            $("div.tabs a").removeClass("current"); //将所有的tab去掉current样式  
            $(".tab").hide(); //隐藏所有  
            $(this).addClass("current");  
            var activeTab = $(this).attr("href"); //获取div  
            $(activeTab).show();  
        });  
     
        //获取从url中传递的  
        var url = window.location.href;  
        var reg = /#.+/;  
        if (reg.test(url)) {//含有#,默认为只有一个#，多个#情况不考虑    
            //隐藏所有  
            $("div.tabs a").removeClass("current"); //将所有的tab去掉current样式  
            $(".tab").hide(); //隐藏所有  
     
            var href = url.split('#')[1];         
            $("div.tabs [href=#" + href + "]").addClass("current");  
            $("#" + href).show();  
        }  
    });

阿聪世家

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
TAB 切换防刷新

.tabs{ list-style:none; width:400px; height:23px;} .tabs a {display:block; float:left;padding:2px 3px; background:#eff7ff; text-decoration:none; margin-right:2px;} .tabs a.c
复制链接

扫一扫