0

提前感谢那些回答的人=）
当我单击相应类的链接时，我正在尝试在 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”，只使用一个“内容”div？
“项目”链接作为示例进行了注释。

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

6 回答 6

1

The classes in your HTML code should be the same as those in JQuery code :

gallery != galerias,

etc.

于 2013-03-01T13:08:34.400 回答
0

这对你来说很好：

  $(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 发送数据

于 2013-03-01T13:52:26.440 回答
0

瑞，

我会做这样的事情：

HTML：

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

查询：

$(".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

}
});
于 2013-03-01T14:46:13.580 回答
0

可能是这个作品。

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

    });
于 2013-03-01T13:12:27.090 回答
0 
$('#cont').click(function(e) {
  e.preventDefault();
  var idToSlide = $(this).attr('class');
  $('#' + idToSlide).slideToggle(500);
});
于 2013-03-01T13:05:57.537 回答
0

我认为修复它的最佳方法是：

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

查询：

$(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”。请检查一下。

于 2013-03-01T13:09:48.937 回答