Измените содержимое DIV, используя jQuery, когда ссылка нажата

Question

Спасибо, за тех, кто отвечает =)
Я пытаюсь переключаться между div, когда я нажимаю ссылки с соответствующим классом (как показано ниже на приведенном ниже рисунке) , Он работает для первой ссылки, но не для остальных. Что я делаю неправильно, и какую другую функцию я могу использовать для этого?

JQuery

$(document).ready(function(){ 
$(".content").hide(); 

$("#cont").click(function() { 
if ($(this).hasClass("info")){ $("#info").slideToggle(500); } 
if ($(this).hasClass("gallery")){ $("#gallery").slideToggle(500); } 
if ($(this).hasClass("projects")){ $("#projects").slideToggle(500); } 
if ($(this).hasClass("contacts")){ $("#contacts").slideToggle(500); } 
    // $(".content").slideToggle(500); 
}); 

}); 

HTML

<?php $type = $_GET['o']; ?> 

<div class="sidebar1"> 
    <ul class="nav"> 
     <li><a id="cont" class="info" href="#">Info</a></li> 
     <li><a id="cont" class="gallery" href="#">Gallery</a></li> 
     //<li><a id="cont" class="projects" href="index.php?o=projects">Projects</a></li> 
     <li><a id="cont" class="contacts" href="#">Contacts</a></li> 
    </ul> 
</div> 
    <div class="content" id="info"> 
    <h1>Info</h1> 
    <p>Info content ...</p> 
</div> 
<div class="content" id="gallery"> 
    <h1>Gallery</h1> 
    <p>Gallerycontent ...</p> 
</div> <!-- it's the same for the other links --> 

На более позднем примечании .. Как я могу сделать что-то похожее на это, используя ссылки, чтобы сказать, что '$ типа' включить, используя только один «контент» div?
Ссылка «Проекты» приводится в качестве примера.

<div class="content"> 
    <?php include($type . ".txt"); ?> 
</div> 

Answer 1

$('#cont').click(function(e) { 
    e.preventDefault(); 
    var idToSlide = $(this).attr('class'); 
    $('#' + idToSlide).slideToggle(500); 
}); 

Answer 2

Классы в вашем HTML-коде должны быть такими же, как в JQuery код:

gallery != galerias, 

и т.д.

Answer 3

Я думаю, что лучший способ исправить это :

HTML:

<div class="sidebar1"> 
    <ul class="nav"> 
     <li><a class="cont info" href="#">Info</a></li> 
     <li><a class="cont gallery" href="#">Gallery</a></li> 
     //<li><a class="cont projects" href="index.php?o=projects">Projects</a></li> 
     <li><a class="cont contacts" href="#">Contacts</a></li> 
    </ul> 
</div> 
    <div class="content" id="info"> 
    <h1>Info</h1> 
    <p>Info content ...</p> 
</div> 
<div class="content" id="gallery"> 
    <h1>Gallery</h1> 
    <p>Gallerycontent ...</p> 
</div> <!-- it's the same for the other links --> 

Jquery:

$(document).ready(function(){ 
$(".content").hide(); 

$(".cont").click(function() { 
if ($(this).hasClass("info")){ $("#info").slideToggle(500); } 
if ($(this).hasClass("gallery")){ $("#gallery").slideToggle(500); } 
if ($(this).hasClass("projectos")){ $("#projectos").slideToggle(500); } 
if ($(this).hasClass("contactos")){ $("#contactos").slideToggle(500); } 
    // $(".content").slideToggle(500); 
}); 
}); 

Все, что я сделал, было изменить прод идентификатор для прод класса. Помните, что два или более элемента не могут иметь один и тот же идентификатор, поэтому будет рассмотрен только первый элемент.

Ах! И, как сказал lmsteffan, в JQUERY вы используете «galerias» и в HTML-галерее. Пожалуйста, проверь это.

Answer 4

Возможно, эта работа.

$(document).ready(function(){ 
    $(".content").hide(); 

    $("#cont").click(function() { 
    if ($(this).hasClass("info")){ $(".info").slideToggle(500); } 
    if ($(this).hasClass("gallery")){ $(".gallery").slideToggle(500); } 
    if ($(this).hasClass("projects")){ $(".projectos").slideToggle(500); } 
    if ($(this).hasClass("contacts")){ $(".contactos").slideToggle(500); } 
     // $(".content").slideToggle(500); 
    }); 

    }); 

Answer 5

Это работает нормально для и:

$(document).ready(function() { 
      $(".content").hide(); 
     }); 


function test(Idpassing) { 
      var clsname = Idpassing[0].id; 


      if (clsname == "cont") { $("#info").slideToggle(500); } 
      if (clsname == "gal") { $("#gallery").slideToggle(500); } 
      if (clsname =="projectos") { $("#projectos").slideToggle(500); } 
      if (clsname == "conta") { $("#Contacts").slideToggle(500); } 
     } 

     <div class="sidebar1"> 
      <ul class="nav"> 
       <li><a id="cont" class="info" href="#" onclick="test($('#cont'))">Info</a></li> 
       <li><a id="gal" class="gallery" href="#" onclick="test($('#gal'))">Gallery</a></li> 
       <li><a id="conta" class="contacts" href="#" onclick="test($('#conta'))">Contacts</a></li> 
      </ul> 
     </div> 
      <div class="content" id="info"> 
      <h1>Info</h1> 
      <p>Info content ...</p> 
     </div> 
     <div class="content" id="gallery"> 
      <h1>Gallery</h1> 
      <p>Gallerycontent ...</p> 
     </div> 
     <div class="content" id="Contacts"> 
      <h1>Contacts</h1> 
      <p>Contactscontent ...</p> 
     </div> 

Отправьте данные с помощью ID

Answer 6

Rui,

Я хотел бы сделать что-то вроде этого:

HTML:

<div class="content"> 
    <h1 id="content-title"></h1> 
    <p id="content-text"></p> 
</div> 

Jquery:

$(".cont").click(function() { 
if ($(this).hasClass("info")){ 
    $("#content-title").text("Your text goes here"); //Set some text in content-title element 
    $("#content-text").text("Your text goes here"); //Set some text in content-text element 
    $(".content").slideToggle(500); //Show the content element class 

} 
});