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

後のメモで..リンクを使用して、1つの'content' divのみを使用して、どの'$ type'を含めるかを指定して、これと同様のことを行うにはどうすればよいですか？
「プロジェクト」リンクは例としてコメントされています。

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

6 に答える 6

1

HTML コードのクラスは、JQuery コードのクラスと同じである必要があります。

gallery != galerias,

等

于 2013-03-01T13:08:34.400 に答える
0

ルイ、

私はこのようなことをします：

HTML:

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

Jクエリ:

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

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クラスに変更することだけでした。2 つ以上の要素が同じ ID を持つことはできないため、最初の要素のみが考慮されることに注意してください。

ああ！lmsteffan が言ったように、JQUERY では「galerias」を、HTML では「gallery」を使用しています。これをチェックしてください。

于 2013-03-01T13:09:48.937 に答える
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

これはうまく機能しています：

  $(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 に答える