使用jQuery链接点击时更改DIV内容

Question

谢谢，为那些谁回答=）
我试图切换divs时，我点击与各自的类的链接（如下面的代码波纹管） 。 它适用于第一个链接，但不适用于其他链接。 我做错了什么，以及我可以使用其他“功能”来做到这一点？

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

所有我做的是续ID更改为续类。请记住，两个或更多个元素不能具有相同的ID，因此只会考虑第一个元素。

啊！正如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

睿发送数据，

我会做这样的事情：

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 

} 
});