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

Posted 2023-04-14

【中文标题】jquery 使默认导航栏按钮处于活动状态

【英文标题】：jquery make default navbar button active

【发布时间】：2018-05-11 23:08:10

【问题描述】：

在打开页面时，我希望 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>                   
  

【问题讨论】：

你试过了吗？ ***.com/questions/50192921/…

您的回答实际上给了我完整的解决方案，因为它允许我加载所有元素，然后打开一个，其余的关闭。这正是我要找的东西 thx :)

【参考方案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>

【参考方案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>