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

您的代码不能正常工作。为了通过 ID select 元素，您需要在前面添加“#”符号并确保正确拼写 ID。在这种情况下，您的 jQuery selection 看起来像这样 $('#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>

Answer 2

看看这个

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

jquery 激活默认导航栏按钮

jquery make default navbar button active

css

default

button

highlight