logo标签列表

选中状态、悬停状态和未选中状态的标签/区块CSS逻辑

jqueryhtmlcss
4

这个问题困扰我有一段时间了。这里没有代码可以展示。我希望使用jquery/css编写以下算法/伪代码：

一个选项卡/<div>，具有以下特点：

  1. 当被选中时（活动元素）- 以蓝色高亮显示
  2. 当鼠标悬停时 - 以青色高亮显示
  3. 未选中/鼠标移出 - 白色
  4. 在鼠标移出时保留选定的元素颜色为蓝色

我希望我的需求清晰明了。感谢任何帮助。

4个回答
3

我认为这个演示：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>

2

CSS:

.tab {
    background: white;
}
.tab.active {
    background: blue;
}
.tab:hover {
    background: aqua;
}

jQuery:

$('.tab').click(function() {
    $(this).addClass('active').siblings().removeClass('active')
})
嗯...这只在点击事件上起作用。就像这样，在单击选项卡时会使其变蓝。但是在单击后，我希望选项卡保持活动状态（除非选择其他选项卡）。此外，在鼠标移出时，当前蓝色（已选择）选项卡不会变白。 - asd
你所描述的预期行为就是当前代码的实际行为。我看不出你的问题在哪里。 - Eric
以 Twitter 动态为例...每个推文默认都是白色背景， 鼠标悬停时变成蓝色， 选择后变成灰色。 此外，当鼠标移开已选择（灰色）的推文时，它不会像其他未选择的推文一样变成白色。希望我现在表述清楚了。 - asd
这就是我的代码所做的！或者你想让选中状态优先于悬停状态吗？ - Eric
2

HTML

<div class="active">Tab</div>
<div>Tab</div>
<div>Tab</div>

CSS

div.active {
    background-color: blue;    
}

div:hover {
    background-color: aqua;   
}

请参见fiddle。

非常完美..谢谢..我将使用jQuery在选项卡的单击事件上添加和删除类.. :) - asd
@asd：你需要添加的jQuery是我回答中你不想要的部分！ - Eric
0

$('.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>

这里有一个样例！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接