jQuery 活动（选定）、悬停和非活动选项卡/div css 逻辑
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6177636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
active(selected), hover and inactive tab/div css logic
提问by asd
I have been stuck with this for a while now. I have no code to show here. I would like an algorithm/pseudocode for the below using jquery/css:
我已经坚持了一段时间了。我没有代码可以在这里显示。我想要一个使用 jquery/css 的算法/伪代码：
A tab / <div>that:
一个标签/<div>那个：
- When selected (the active element) - is highlighted with the color blue
- When hovered - highlighted with color aqua
- unselected/mouseout - colored white
- selected element on hoverout (mouseout) - should retain color blue
- 选中时（活动元素） - 以蓝色突出显示
- 悬停时 - 用浅绿色突出显示
- 未选中/鼠标移出 - 白色
- 悬停（鼠标悬停）上的选定元素 - 应保留蓝色
I hope I am clear with my need. Any help is appreciated.
我希望我清楚我的需要。任何帮助表示赞赏。
回答by sheelpriy
i think this Demo: http://jsfiddle.net/sahilosheal/caB3a/1/will help you to solve your problem, please go through it and let me know.
我认为这个演示：http: //jsfiddle.net/sahillosheal/caB3a/1/将帮助您解决您的问题，请仔细阅读并告诉我。
$('.tab').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});div.active {
background-color: #2e2e2e !important;
color: white;
height: 25px;
width: 100px;
float: left;
margin-right: 2px;
text-align: center;
padding-top: 5px;
}
div.bat:hover {
background-color: #80a3bb;
height: 25px;
width: 100px;
float: left;
margin-right: 2px;
text-align: center;
padding-top: 5px;
}
div.bat {
background-color: orange;
height: 25px;
width: 100px;
float: left;
margin-right: 2px;
text-align: center;
padding-top: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab bat">select1</div>
<div class="tab bat">select2</div>
<div class="tab bat">select3</div>回答by Eric
CSS:
CSS：
.tab {
background: white;
}
.tab.active {
background: blue;
}
.tab:hover {
background: aqua;
}
jQuery:
jQuery：
$('.tab').click(function() {
$(this).addClass('active').siblings().removeClass('active')
})
回答by melhosseiny
回答by lhoess
$('.tab').click(function() {
$(this).addClass('active').siblings().removeClass('active');
}).main {
width: 325px;
}
div.tab {
background: white;
width: 100px;
border: 1px solid grey;
padding-left: 5px;
}
div.tab.active {
background: blue;
}
div.tab:hover {
background: aqua;
}
.blue {
background: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="tab" style="float:right;">Tab 3</div>
<div class="tab" style="float:right;">Tab 2</div>
<div class="tab active" style="float:right;">Tab 1</div>
</div>
</body>