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

稍后请注意.. 我怎样才能做类似的事情，使用链接说出要包含的'$ type'，只使用一个'content'div？
“项目”链接被评为示例。

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

Answer 1

HTML代码中的类应与JQuery代码中的类相同：

gallery != galerias,

等

Answer 2

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

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

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

啊！正如lmsteffan所说，在JQUERY中你正在使用“galerias”和HTML“gallery”。请检查一下。

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

}
});

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

6 个答案: