选择新锚点会更改背景颜色并删除先前单击的锚点的背景颜色

Question

我希望就地创建 this effect with this 语法。

基本上我希望选定的导航按钮有背景色，但其他的则没有。由于这些导航按钮在一个 html 页面内并且不会 link 在页面之外，这是一个问题，因为我不能简单地将 class="selected" style="css"> 应用于它。

我曾尝试使用 js 和 jquery 在其他问题上找到的，但这些都不适合我。

<div id="header">
    <a class="head">Title</a>
        <a class="test head"><label for="tab1" id="label1" class="label">Tab 1</label></a>
        <a class="test head"><label for="tab2" id="label2" class="label">Tab 2</label></a>
        <a class="test head"><label for="tab3" id="label3" class="label">Tab 3</label></a>
        <a class="test head"><label for="tab4" id="label4" class="label">Tab 4</label></a>
</div>

我尝试使用 :active、:selected 和所有可能的伪类，其中 none 将起作用。任何建议将不胜感激。谢谢。

Answer 1

我不清楚确切你想做什么，但可以修改链接Jquery以满足你的结构。

$('#header a').click(function() {
    $('#header a').not(this).removeClass('selected');
    $(this).addClass('selected');
});

/*relevant code*/
.head:active {
    background-color: blue;
}

a .label {
 width: 100% !important;
 height: 40px !important;
 display: block !important;
}

#header {
 width: 100%;
 display: flex;
 flex: 0 1 auto;
 flex-wrap: no-wrap;
 flex-direction: row;
 height: 40px;
 margin: 5px auto;
}

.head {
 height: 100%; line-height: 40px;
 flex-grow: 1;
 margin: 0px;
 text-align: center; text-decoration: none; color: #000000; font-weight: bold;
 border-right: thin black solid;
 box-sizing: border-box;
}

.head li {
 height: 100%; line-height: 40px;
 flex-grow: 1;
 margin: 0px;
 text-align: center; text-decoration: none; color: #000000; font-weight: bold;
 border-right: thin black solid;
 box-sizing: border-box;
}

.head:first-child {
 border-bottom: none;
}


.head:hover {
 color: #00ABFF;
}

.head:first-child {
 flex-grow: 3;
 background-color: black;
 color: white;
 text-transform: uppercase;
}

.selected { background: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <a class="head">Title</a>
  <a class="test head">
    <label for="tab1" id="label1" class="label">Tab 1</label>
  </a>
  <a class="test head">
    <label for="tab2" id="label2" class="label">Tab 2</label>
  </a>
  <a class="test head">
    <label for="tab3" id="label3" class="label">Tab 3</label>
  </a>
  <a class="test head">
    <label for="tab4" id="label4" class="label">Tab 4</label>
  </a>
</div>

选择新锚点会更改背景颜色并删除先前单击的锚点的背景颜色

selection of new anchor changes background colour and removes background colour of previously clicked anchor

html

css

pseudo-class