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

Question

我希望使用this语法创建this效果。

基本上我希望所选导航按钮具有背景颜色，但其他人则不希望。由于这些导航按钮位于一个html页面内，并且没有链接到页面外，这是一个问题，因为我不能简单地将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和所有可能的伪类，其中任何一个都不起作用。任何建议将不胜感激。谢谢。

Answer 1

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

Expression<Func<T>>

$('#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; }