jQuery mouseenter一个修改另一个类的CSS

时间:2013-08-11 17:58:19

标签: jquery css tabs mouseevent

我有三个嵌套标签,我需要以下内容:

  1. 当鼠标悬停在其中一个嵌套标签
  2. 上时,应应用特殊格式(突出显示)
  3. 当鼠标 悬停在任何标签上时,应突出显示有效标签
  4. 当鼠标 悬停在其中一个非活动标签上时,活动标签应采用与其他(非活动)标签相同的非突出显示格式

    <!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=utf-8" />
    <title>REPORT TITLE</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <!--- Main tab functionality --->
    <script type="text/javascript">
    $(document).ready(function() {
        $(".tab_content").hide();
        $(".tab_content:first").show(); 
    
        $("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active");
            $(this).addClass("active");
            $(".tab_content").hide();
            var activeTab = $(this).attr("rel"); 
            $("#"+activeTab).fadeIn(); 
        });
    });
    <!--- Site/sub tab functionality --->
        $(document).ready(function() {
            $(".sub_content").hide();
            $(".sub_content:first").show(); 
            $("ul.sub_tabs li").click(function() {
                $("ul.sub_tabs li").removeClass("active_sub");
                $(this).removeClass("inactive_sub");
                $(this).addClass("active_sub");
                $("ul.sub_tabs li").not(".active_sub").addClass("inactive_sub");
                $(".sub_content").hide();
                var activeSubTab = $(this).attr("rel"); 
                $("#"+activeSubTab).fadeIn();
            });
        });
        $(document).ready(function(){
            $('.inactive_sub').hover(function(){
                $('.active_sub').toggleClass("active_deselect");
            });
        });
    </script>
    </head>
    <body>
    <div id="wrap">
        <h1>REPORT</h1>
        <ul class="tabs">
            <li class="active" rel="tab1">BY CYCLE</li>
            <li rel="tab2">BY MONTH</li>
            <li rel="tab3">SUMMARY</li>
        </ul>
        <div id="tab1" class="tab_content">
            <br /><br />
            <ul class="sub_tabs">
                <li class="active_sub" rel="sub1">UTAH</li>
                <li rel="sub2">ARIZONA</li>
                <li rel="sub3">OHIO</li>
            </ul>
            <br />
            <div id="sub1" class="sub_content">
                S1
            </div>
            <div id="sub2" class="sub_content">
                S2
            </div>
            <div id="sub3" class="sub_content">
                S3
            </div>
        </div>
        <div id="tab2" class="tab_content">
            <br />
            <p>T2</p>
        </div>
        <div id="tab3" class="tab_content">
            <br />
            <p>T3</p>
        </div>
    </div>
    </body>
    </html>
    
    
    /* RELATED CSS */
    
    ul.sub_tabs {
        margin: 0;
        padding: 0;
        float: left;
        width: 100%;
    }
    
    ul.sub_tabs li {
        float: left;
        margin: 0;
        cursor: pointer;
        padding: 0px 21px ;
        width: 294px;
        font-weight: bold;
        background: #EEEEEE;
        overflow: hidden;
        position: relative;
        text-align: center;
        vertical-align: middle;
        font-size: 1.5em;
        letter-spacing: 2px;
        line-height: 60px;
    }
    
    ul.sub_tabs li:hover {
        background: #FF9912;
        color: white;
    }
    
    ul.sub_tabs li.active_sub{
        background: #FF9912;
        color: white;
    }
    
    ul.sub_tabs li.active_deselect{
        background: #EEEEEE;
        color: black;
    }
    
    .sub_content {
        border-top: none;
        clear: both;
        float: left; 
        width: 100%;
        background: #FFFFFF;
        text-align: center;
    }
    
    sub_wrap {
        border: 1px solid #999999;
        border-top: none;
        clear: both;
        float: left; 
        width: 100%;
        background: #FFFFFF;
    }
    

0 个答案:

没有答案