jquery verstecken div, zeigen ein anderes, auf klicken

Question

Ich fand einige jQuery, um mir mit dem Anzeigen und Verbergen einer div Anzeige zu helfen. Was passiert, wenn ein Link angeklickt wird, blendet er den ersten div aus und zeigt den zweiten. Ich habe mehrere Möglichkeiten gefunden, dies zu tun, aber es bricht die ganze Seite ab und zeigt nur die Fußzeile und sonst nichts auf der Seite. Es sieht wirklich komisch aus, aber ich weiß nicht genug über jQuery, um es zu reparieren, also würde jede Hilfe sehr geschätzt werden!

$('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 Hier ist die Testseite, so können Sie sehen, wie es vermasselt (oder die Lösung, wenn es repariert wird) Ich verwende Fundament 5 für den Rahmen der Arbeit so ich bin nicht sicher, ob da etwas ist, das es kaputt macht oder etwas anderes.

Answer 1

Wie @Tushar bereits erwähnt, müssen Sie einen Container machen, dass alle Ihre divs wird wickeln und dann können Sie mit Ihrem Javascript/JQuery spielen:

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; 
} 

Arbeits Demo:http://jsfiddle.net/boq0c76f/

Answer 2

$('div') wird alle <div> Elemente auf der Seite auswählen.

Sie können

1. wickeln die div Elemente von Interesse in einem Behälter

   <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> 
   

   Und in JavaScript verwenden

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

2. eine gemeinsame & einzigartige Klasse auf alle hinzufügen die div Elemente von 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> 
   

   und in JavaScript

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

und den Selektor verwenden nur die Elemente auszuwählen.