jQuery使默认导航栏按钮处于活动状态

Question

打开页面时，我希望button1具有活动状态，以便它亮起。(颜色白色( 因此，很明显导航栏下方显示的内容是该激活按钮的一部分。 之后，如果我按下任何其他导航栏按钮，我希望默认激活的按钮关闭。

我遇到了以下jquery：

$('aheader1').addClass('active')

但是当我在 css 中添加 .active 时，这不会改变任何东西。

<div class="wrapper">
<div class="small_wrapper1"> 
<th class="header1"><a id="aheader11" ">Button1</a></th>
<th  class="header2"><a id="aheader21" ">Button2</a></th>
<th class="header3"><a id="aheader31">Button3</a></th>                   

Answer 1

看看这个

$('a').click(function() {
$('a').removeClass('active')
$(this).addClass('active')
});

.active {
background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="small_wrapper1">
<span class="header1"><a id="aheader11" >Button1</a></span>
<span class="header2"><a id="aheader21" >Button2</a></span>
<span class="header3"><a id="aheader31">Button3</a></span>
</div>
</div>

Answer 2

你的代码不能正常工作。为了通过ID选择元素，您需要在前面添加"#"符号，并确保ID拼写正确。在这种情况下，您的jQuery选择将如下所示$('#aheader11').addClass('active')

$('#aheader11').addClass('active')
//this will make Button 1 white (pretty much invisible unless the background is something other than white

.active{
color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="small_wrapper1"> 
<th class="header1"><a id="aheader11">Button1</a></th>
<th  class="header2"><a id="aheader21">Button2</a></th>
<th class="header3"><a id="aheader31">Button3</a></th>