<分区>
<分区>
我有这些 CSS 代码:
.tabs_inactive {
border: 1px solid #cccccc;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-color: #eeeeee;
border-bottom: #cccccc;
}
.tabs_inactive:hover {
background-color: #ff8000;
border-color: #ff8000;
cursor: pointer;
}
/*this does not work*/
.tabs_inactive:hover a {
color: #ffffff;
}
.tabs_active {
background-color: #ffffff;
border-bottom: 2px solid #ffffff;
}
.tabs_active:hover{
background-color: #ffffff;
border: 1px solid #cccccc;
border-bottom: 2px solid #ffffff;
cursor: default;
}
.tabs_active:hover a {
cursor: default;
}
最后一个 (.tab_active:hover a) 在我的网页中运行良好，但第三个 block 不是。我不明白为什么会这样。
有人能解释一下为什么第三 block 不起作用吗？
谢谢!
更新 1: 这是相关的 JavaScript 代码:
//add class "tabs_inactive" to the original tabs option.
$( "#tabs ul li" ).addClass("tabs_inactive");
//default: set the first tab as the active one.
$( "#tabs ul li" ).first().toggleClass("tabs_active");
//to make sure the style sheet will be changed when click on the inside <a> tag
$( "#tabs ul li a" ).live( "click", function () {
//close other tabs
$( this ).parents("ul").children("li").each( function (){
if( $(this).hasClass("tabs_active")){
$(this).removeClass("tabs_active");
}
});
$( this ).parent().toggleClass("tabs_active");
return false;
});
//change the class to "tabs_active" when the tab is clicked
$( "#tabs ul li" ).live( "click", function () {
//close other tab
$( this ).parent().children("li").each( function (){
if( $(this).hasClass("tabs_active")){
$(this).removeClass("tabs_active");
}
});
$( this ).toggleClass("tabs_active");
});
还有 HTML 代码:
<div id="tabs">
<ul>
<li><a href="#homepage">HOME</a> </li>
<li><a href="#option1">option1</a> </li>
</ul>
<div id="homepage">
<p>
HOME:
Here is the home page
</p>
</div>
<div id="option1">
<p>
Option1:
Here is the tag page 1
</p>
</div>
</div>
所以，是的，我正在尝试实现一个选项卡菜单，这是一种做法，所以我不想使用原始的 JqueryUI 功能。有人知道这是什么问题吗？ 谢谢。
最佳答案
对不起各位，这不是打字错误或其他什么，我只是犯了一个错误，我给之前的#tab ul li a赋予了字体颜色样式，这是使用id选择器，并且这使得函数 toggleClass 根本不起作用。我将该标签从 id 转换为 class，然后一切正常。谢谢大家，那是我的错。
关于CSS - 悬停不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13390250/