Question

我已经坚持了一段时间了。我没有在这里显示的代码。我想使用jquery / css：

为下面的算法/伪代码

标签/ <div>：

选中时（活动元素） - 以蓝色突出显示
悬停时 - 用彩色水色突出显示
未选中/ mouseout - 彩色白色
hoverout上的所选元素（mouseout） - 应保留蓝色

我希望我能清楚自己的需要。任何帮助表示赞赏。

Answer 1

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

Answer 2

CSS：

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

jQuery的：

$('.tab').click(function() {
    $(this).addClass('active').siblings().removeClass('active')
})

Answer 3

HTML

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

CSS

div.active {
    background-color: blue;    
}

div:hover {
    background-color: aqua;   
}

请参阅fiddle。

Answer 4

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

Here's a sample！

活动（选定），悬停和非活动tab / div css逻辑

4 个答案:

CSS：

jQuery的：