JQuery сделать кнопку Navbar по умолчанию активным - PullRequest
0 голосов
/ 12 мая 2018

При открытии страницы я хочу, чтобы у button1 был активный статус, чтобы он загорался. (белый цвет) Чтобы было ясно, что содержимое, отображаемое под панелью навигации, является частью этой активированной кнопки. После этого, если я нажму любую из других кнопок панели навигации, я хочу, чтобы активированная по умолчанию кнопка была выключена.

Я наткнулся на следующий jquery:

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

однако, когда я добавляю .active в css, это ничего не меняет.

<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>                   
  

Ответы [ 2 ]

0 голосов
/ 12 мая 2018

Взгляните на это

$('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>
0 голосов
/ 12 мая 2018

Ваш код не работает.Чтобы выбрать элемент по идентификатору, необходимо добавить символ «#» впереди и убедиться, что идентификатор написан правильно.В этом случае ваш выбор 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>     
...