Переключить связь с содержанием

Question

Я этот код:

<a href="#" class="btn">Link1</a> 
<a href="#" class="btn">Link2</a> 
<a href="#" class="btn">Link3</a> 
<div>Content link 1</div> 
<div>Content link 2</div> 
<div>Content link 3</div> 

Я хочу, чтобы каждое звено соответствует его DIV (Link1 => Содержание ссылки 1, LINK2 => Content ссылка 2, ЭСТ .....)

Я написал эту JavaScript

 $('div').hide(); 

      $(".btn").click(function() { 
       $(this).next("div").slideToggle('slow'); 
      }); 

Но это не работает. Если бы кто-то мог мне помочь.

Answer 1

Вы должны создать связь между каждым DIV контента и кнопку, чтобы активировать его. Вам также необходимо запустить все контентные divs как скрытые.

$('.btn').click(function(elm) { 
 
    $('.content').hide(); 
 
    console.log($(this).attr('data-link')) 
 
    var id = $(this).attr('data-link') 
 
    $('#' + id).slideToggle('slow') 
 
})

.content { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a data-link="link1" href="#" class="btn">Link1</a> 
 
<a data-link="link2" href="#" class="btn">Link2</a> 
 
<a data-link="link3" href="#" class="btn">Link3</a> 
 
<div id="link1" class="content">Content link 1</div> 
 
<div id="link2" class="content">Content link 2</div> 
 
<div id="link3" class="content">Content link 3</div>

Answer 2

Вы недопонимаете селектор .next. Вы всегда будете выбирать первый div.

<a href="#" class="btn" data-rel="div1">Link1</a> 
<a href="#" class="btn" data-rel="div2">Link2</a> 
<a href="#" class="btn" data-rel="div3">Link3</a> 
<div id="div1">Content link 1</div> 
<div id="div2">Content link 2</div> 
<div id="div3">Content link 3</div> 

    $(".btn").click(function (evt) { 
    var rel = $(this).attr('data-rel'); 
    $("#"+rel).slideToggle('slow'); 
}); 

Answer 3

$('div').hide(); 
 

 
$(".btn").click(function() { 
 
    var index = $(this).attr("data-index"); 
 
    $("div[data-index!='"+index+"']").slideUp('slow', function(){ 
 
    $("div[data-index='"+index+"']").delay(400).slideDown(); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="btn" data-index="1">Link1</a> 
 
<a href="#" class="btn" data-index="2">Link2</a> 
 
<a href="#" class="btn" data-index="3">Link3</a> 
 
<div data-index="1">Content link 1</div> 
 
<div data-index="2">Content link 2</div> 
 
<div data-index="3">Content link 3</div>

Answer 4

Для вашего представленной разметки:

$('div').hide(); 
$(".btn").click(function() { 
    $('div').hide(); // hide open divs 
    var index = $(this).siblings().andSelf().index(this); 
    $(this).nextAll("div").eq(index).slideToggle('slow'); 
}); 

Answer 5

Есть много способов делать это, но я нахожу это более легким и удобным. Я использовал: eq (index) JQuery.

Как и в CSS, мы имеем тег: nth-child (num); в JQuery есть этот : eq (index), чтобы выбрать определенный тег, которые являются братьями и сестрами.

Для примера:

HTML

<li>1</li> <li>2</li> <li>3</li> <li>4</li> 

JQuery

$("li:eq(2)").hide(); 

Теперь то, что он делает это выбирает третьих li тег и скрыть. Да, это индекс начинается с 0 (нуля)

Вашего решение

WORKING:DEMO

HTML просто добавил идентификатор своих якорных тегам

<a href="#" class="btn" id="1">Link1</a> 

<a href="#" class="btn" id="2">Link2</a> 

<a href="#" class="btn" id="3">Link3</a> 

<div>Content link 1</div> 
<div>Content link 2</div> 
<div>Content link 3</div> 

JQuery

$("div").hide(); /* At beginning hiding all div's */ 
$("a").click(function(){ 
    var curId = this.id; /* Find and store id of <a> tag is clicked */ 
    var findId = curId-1;/* This is for :eq() selector */ 
    $("div").slideUp();/*Hide the rest div if visible accept the one clicked */ 
    $("div:eq("+ findId +")").fadeToggle(); 
});