5

Подскажите, как сделать так, чтобы кликая по li с индексом 1 показывался div.section с индексом 1,а все остальные div.section с другими индексами были скрыты, тоже самое нужно и для других li

$(".section").hide();
$(".section").eq(0).show();
$(document).on("click", ".active_element", function() {
  var idx = $(this).index();
  $(".section").eq(idx).toggle();
})
.active_element {
  position: relative;
}
.active_element:after {
  display: block;
  position: absolute;
  top: 44px;
  width: 114px;
  content: '';
  border-bottom: 8px solid #fdd901;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6">
  <div class="row">
    <ul class="h_scroll">
      <li class="active_element">об услуге</li>
      <li class="active_element">цены</li>
      <li class="active_element">преимущества</li>
    </ul>
  </div>
  <div class="row">
    <div id="container">
      <div class="h_scroll_content">
        <div class="section">
          <p class="txt">
            text
          </p>
        </div>
        <div class="section">
          <p class="txt">
            text 2
          </p>
        </div>
        <div class="section">
          text 3
        </div>
      </div>
    </div>
  </div>
</div>

2
  • 1
    Учитывая, что это бутстрап - можно использовать компонент tab.js: getbootstrap.com/javascript/#tabs 5 сен 2016 в 20:07
  • честно говоря я бы хотел бы исправить, то что я написал, без использования доп библиотек 5 сен 2016 в 20:08

1 ответ 1

5

$(".active_element").on("click", function(){
    var idx = $(this).index();
	
	$(".active_element").removeClass("highlight");
	$(this).toggleClass("highlight");
	
	$(".section").hide();
    $(".section").eq(idx).toggle(); 
});
.active_element {
  position: relative;
  display: block;
  width: 114px;
  cursor: pointer;
}
.highlight {
  background-color: #fdd901;
}
.section {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6">
  <div class="row">
    <ul class="h_scroll">
      <li class="active_element">об услуге</li>
      <li class="active_element">цены</li>
      <li class="active_element">преимущества</li>
    </ul>
  </div>
  <div class="row">
    <div id="container">
      <div class="h_scroll_content">
        <div class="section">
          <p class="txt">text</p>
        </div>
        <div class="section">
          <p class="txt">text 2</p>
        </div>
        <div class="section">
          <p class="txt">text 3</p>
        </div>
      </div>
    </div>
  </div>
</div>

2
  • а не подскажите, как сделать,так чтобы в данном случае по клику по конретному ли добавлялся бы border-bottom, которой бы находился по середине эллемента 5 сен 2016 в 20:20
  • Могу вам предложить вариант с background-color, вместо border. Обновил вариант предложенный выше.
    – Vedenin
    5 сен 2016 в 21:04

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.