jquery hide div, показать другое, по щелчку

Question

Я нашел несколько jQuery, чтобы помочь мне с отображением и скрытием дисплея div. Что должно произойти, так это то, что при нажатии одной ссылки он скрывает первый div и показывает второй. Я нашел несколько способов сделать это, но он разбивает всю страницу, показывая только нижний колонтитул и ничего больше на странице. Это выглядит действительно странно, но я не знаю достаточно о jQuery, чтобы исправить это, поэтому любая помощь будет принята с благодарностью!

$('a').click(function(e) { 
 
    e.preventDefault(); 
 
    $('div').eq($(this).index()).show(); 
 
    $('div').not($('div').eq($(this).index())).hide(); 
 
});

.hide { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<a href='#'>link1</a> 
 
<a href='#'>link2</a> 
 
<a href='#'>link3</a> 
 

 
<div> div for link 1</div> 
 
<div class="hide"> div for link 2</div> 
 
<div class="hide"> div for link 3</div>

http://www.embroiderywear.com/designshirtsonline1.html Вот тестовая страница, так что вы можете увидеть, как это Мессинг (или решение, если оно фиксируется) Я использую фундамент 5 для работы рамы, так что я не уверен, что это что-то там, что ломает его или что-то еще.

Answer 1

Как @Tushar уже упоминалось, что вам нужно сделать контейнер, который будет обернуть все ваши дивы, а затем вы можете играть с помощью JavaScript/JQuery:

HTML:

<a href='#'>link1</a> 
<a href='#'>link2</a> 
<a href='#'>link3</a> 

<div id="divContainer"> 
    <div> div for link 1</div> 
    <div class="hide"> div for link 2</div> 
    <div class="hide"> div for link 3</div> 
</div> 

Javascript/Jquery:

$(document).ready(function(){ 

    $('a').click(function(e) { 
    e.preventDefault(); 
    $('div#divContainer div').hide(); 
    $('div#divContainer div').eq($(this).index()).show(); 
    }); 

}); 

CSS:

.hide { 
    display:none; 
} 

Рабочая Демо:http://jsfiddle.net/boq0c76f/

Answer 2

$('div') выберет все элементы <div> на странице.

Вы можете

1. завернуть div элементы, представляющие интерес в контейнере

   <div id="container"> 
       <div> div for link 1</div> 
       <div class="hide"> div for link 2</div> 
       <div class="hide"> div for link 3</div> 
   </div> 
   

   И в JavaScript, используйте

   $('#container div').eq($(this).index()).show() // Show the corr. el 
       .siblings().hide();       // Hide other 
   

2. добавить общий & уникальный класс на всех div элементов int erest

   <div class="myClass"> div for link 1</div> 
   <div class="hide myClass"> div for link 2</div> 
   <div class="hide myClass"> div for link 3</div> 
   

   и в JavaScript

   $('.myClass').eq($(this).index()).show() 
       .siblings().hide(); 
   

и использовать селектор, чтобы выбрать только те элементы.