Jquery Условие на класс [требует правки]

292

21 марта 2017, 12:54

Уважаемые жители Стака прошу совета.

есть код. Заявка родителя Заявка соискателя

$(document).ready(function() { 
  if ($('li').hasClass('active')) { 
    $('.bbd').addClass('acc') 
  } else { 
    $('.bbd').removeClass('acc') 
  } 
});

.acc { 
    border-bottom: 1px dotted #024a78; 
} 
.acc:link, 
.acc:visited, 
.acc:hover, 
.acc:active{ 
    border-bottom: 1px dotted #024a78; 
     
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="nav nav-tabs borders"> 
  <li class="semi active"> 
    <a href="#tab-1" data-toggle="tab"> 
      <span class="bbd">Заявка родителя</span> 
    </a> 
  </li> 
  <li class="semi"> 
    <a href="#tab-2" data-toggle="tab"> 
      <span class="bbd">Заявка соискателя</span> 
    </a> 
  </li> 
</ul>

Нужно что бы при активности, появлялся бордерботтом.

Answer 1

Используя телепатический модуль сообщаю, вам гораздо проще будет убрать этот класс у всех, а потом, добавить класс к потомку li с классом active.

$(document).ready(function() { 
  $('li .bbd').removeClass('acc'); 
  $('li.active .bbd').addClass('acc'); 
 
});

.acc { 
    border-bottom: 1px dotted #024a78; 
} 
.acc:link, 
.acc:visited, 
.acc:hover, 
.acc:active{ 
    border-bottom: 1px dotted #024a78; 
     
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="nav nav-tabs borders"> 
  <li class="semi active"> 
    <a href="#tab-1" data-toggle="tab"> 
      <span class="bbd">Заявка родителя</span> 
    </a> 
  </li> 
  <li class="semi"> 
    <a href="#tab-2" data-toggle="tab"> 
      <span class="bbd">Заявка соискателя</span> 
    </a> 
  </li> 
</ul>

Answer 2

Знаю вот такой вариант

$("li .bbd").click(function(){  
	  $("li .bbd").each(function(){ 
		  $(this).removeClass("acc"); 
	  }); 
	     $(this).addClass("acc"); 
 });

.acc { 
    border-bottom: 1px dotted #024a78; 
} 
.acc:link, 
.acc:visited, 
.acc:hover, 
.acc:active{ 
    border-bottom: 1px dotted #024a78; 
     
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="nav nav-tabs borders"> 
  <li class="semi active"> 
    <a href="#tab-1" data-toggle="tab"> 
      <span class="bbd">Заявка родителя</span> 
    </a> 
  </li> 
  <li class="semi"> 
    <a href="#tab-2" data-toggle="tab"> 
      <span class="bbd">Заявка соискателя</span> 
    </a> 
  </li> 
</ul>