点击

Question

我的HTML页面中有一个标签式窗格。必须在任务中完成以下更改。

1. 选择标签或悬停时，背景 - 白色，文字颜色 - ＃6baed9，border - 1px与文字颜色相同。

2. 当取消选中标签时（如果选择另一个标签，则此选项将成为未选中标签） - 背景 - ＃6baed9，文字颜色 - 白色，边框 - 与文本颜色相同的1px。

我的CSS如下，

#my_settings ul.tab li a {
    display: inline-block;
    text-align: center;
    padding: 8px 12px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
    height:35px;
    width:250px;
    color: #6baed9;
}

#my_settings ul.tab li a:hover {
    background-color: #fff;
    color: #6baed9;
    border: 1px solid #6baed9
}

#my_settings ul.tab li a:focus, .active {
    background-color: #fff;
    color: #6baed9;
    border: 1px solid #6baed9
}

我遇到的问题：

1. 在上面的情况2中，当未选择标签时，我无法获得白色文字颜色。

2. 所选标签的边框很好但底线没有显示。为什么。

请帮我这样做。

PS：当我尝试将#my_settings ul.tab li a {更改为color : #fff时，效果正常。但是，当我点击页面中的某个位置时，所选标签的颜色（＃6baed9）将转为白色。

Answer 1

$(".tab").click(function() {
  $(".tab").removeClass('selected')
  $(this).addClass('selected')
})
$(".tab").hover(function() {
  $(".tab").removeClass('selected')
  $(this).addClass('selected')
})

.tab {
  width: 60px;
  height: 60px;
  background: #3be9a6;
  margin: 20px;
  display: inline-block;
  float: left
}
.selected {
  background: #3b6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
<div class="tab">4</div>
<div class="tab">5</div>
<div class="tab">6</div>
<div class="tab">7</div>

你可以像上面的代码片段一样使用设置。使用jquery来插入具有你想要在悬停或点击时更改的属性的类。

Answer 2

您是否为活动标签设置了<li class="active">？