Fatal编程技术网
  • jquery/
  • jQuery鼠标输入一个以修改另一个类'；s CSS

jQuery鼠标输入一个以修改另一个类'；s CSS

jquery css tabs

jQuery鼠标输入一个以修改另一个类'；s CSS,jquery,css,tabs,mouseevent,Jquery,Css,Tabs,Mouseevent,我有三个嵌套选项卡，需要从中执行以下操作： 当鼠标悬停在其中一个嵌套选项卡上时，应应用特殊格式（突出显示） 当鼠标未悬停在任何选项卡上时，应突出显示活动选项卡 当鼠标悬停在一个非活动选项卡上时，活动选项卡应采用与另一个（非活动）选项卡相同的非高亮显示格式 报告标题 $（文档）.ready（函数（）{ $（“.tab_content”）.hide（）； $（“.tab_content:first”）.show（）； $（“ul.tabs li”）。单击（函数（）{ $（“ul.tabs li”）

我有三个嵌套选项卡，需要从中执行以下操作：

  • 当鼠标悬停在其中一个嵌套选项卡上时，应应用特殊格式（突出显示）
  • 当鼠标未悬停在任何选项卡上时，应突出显示活动选项卡
  • 当鼠标悬停在一个非活动选项卡上时，活动选项卡应采用与另一个（非活动）选项卡相同的非高亮显示格式

    
报告标题
$（文档）.ready（函数（）{
$（“.tab_content”）.hide（）；
$（“.tab_content:first”）.show（）；
$（“ul.tabs li”）。单击（函数（）{
$（“ul.tabs li”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
$（“.tab_content”）.hide（）；
var activeTab=$（this.attr（“rel”）；
$（“#”+activeTab.fadeIn（）；
});
});
$（文档）.ready（函数（）{
$（“.sub_content”）.hide（）；
$（“.sub_content:first”）.show（）；
$（“ul.sub_tabs li”）。单击（函数（）{
$（“ul.sub_tabs li”）.removeClass（“active_sub”）；
$（this.removeClass（“非活动子”）；
$（this.addClass（“active_sub”）；
$（“ul.sub”）非（“.active\u sub”）.addClass（“inactive\u sub”）；
$（“.sub_content”）.hide（）；
var activeSubTab=$（this.attr（“rel”）；
$（“#”+activeSubTab.fadeIn（）；
});
});
$（文档）.ready（函数（）{
$（'.inactive_sub'）。悬停（函数（）{
$（'.active_sub'）.toggleClass（“active_deselect”）；
});
});
报告

      

    • 按周期
      • 

    • 按月
      • 
总结

    


    

      
犹他州
亚利桑那州
俄亥俄州

    

    
S1
S2
S3

    
T2
    

    
T3
    
/*相关CSS*/
ul.sub_标签{
保证金：0；
填充：0；
浮动：左；
宽度：100%；
}
ul.sub_tabs li{
浮动：左；
保证金：0；
光标：指针；
填充：0px21px；
宽度：294px；
字体大小：粗体；
背景：#EEEEEE；
溢出：隐藏；
位置：相对位置；
文本对齐：居中；
垂直对齐：中间对齐；
字号：1.5em；
字母间距：2px；
线高：60px；
}
ul.sub_标签li：悬停{
背景:#FF9912；
颜色：白色；
}
ul.sub\u选项卡li.active\u sub{
背景:#FF9912；
颜色：白色；
}
ul.sub_选项卡li.active_取消选择{
背景：#EEEEEE；
颜色：黑色；
}
.sub_内容{
边界顶部：无；
明确：两者皆有；
浮动：左；
宽度：100%；
背景：#FFFFFF；
文本对齐：居中；
}
分包{
边框：1px实心#999999；
边界顶部：无；
明确：两者皆有；
浮动：左；
宽度：100%；
背景：#FFFFFF；
}
    • 你能发布你的html吗？我会避免使用jQuery修改CSS属性，而是使用它来添加/删除元素上的类。在这种情况下，你不需要mouseenter和mouseleave，只要
    li.inactive\u sub
    和
    li.inactive\u sub:hover
    在CSS中。我已经更新了上面的代码并包含CSS-尝试了toggleClass函数但是，当一个非活动选项卡悬停时，让活动子选项卡转到标准格式是不可能的。将问题中的语言也编辑得更清楚。 
    <!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;
}