jquery divを表示する、別のを表示する、クリックする

Question

divの表示を非表示にするためのjQueryが見つかりました。 1つのリンクをクリックすると、最初にdivが隠され、2番目のリンクが表示されます。私はこれを行ういくつかの方法を見つけましたが、ページ全体を壊すだけで、毎回ページ上にフッターやその他のものは表示されません。本当に奇妙に見えますが、それを修正するために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

、あなたのdiv要素のすべてをラップし、その後、あなたの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 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での関心のdiv要素をラップ

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

2. を使用することができますdivの要素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(); 
   

と要素のみを選択するセレクタを使用しています。 @Tusharは、すでに述べたように