如何解决有效选定,悬停和无效的tab / div CSS逻辑
| 我已经坚持了一段时间。我没有要显示的代码。我想要使用jquery / css的以下算法/伪代码: 制表符/“ 0”表示: 选中时(活动元素)-用蓝色突出显示 悬停时-以浅绿色突出显示 未选择/暂停-白色 悬停时选择的元素(鼠标悬停)-应该保留蓝色 我希望我清楚自己的需要。任何帮助表示赞赏。解决方法
我认为这个演示:http://jsfiddle.net/sahilosheal/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>
, CSS:
.tab {
background: white;
}
.tab.active {
background: blue;
}
.tab:hover {
background: aqua;
}
jQuery的:
$(\'.tab\').click(function() {
$(this).addClass(\'active\').siblings().removeClass(\'active\')
})
, 的HTML
<div class=\"active\">Tab</div>
<div>Tab</div>
<div>Tab</div>
的CSS
div.active {
background-color: blue;
}
div:hover {
background-color: aqua;
}
见小提琴。
,
$(\'.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。