Question

现在我花了2个小时努力解决这个问题。我需要的是，当单击其中一个链接时，jQuery应该显示与href属性具有相同ID的div。

例如，如果我点击第一个链接（href="#form1"），则必须显示带有ID ＃form1 的<{1}}

<div>

我不确定为什么它不起作用。

Answer 1

更改此代码块：

if ("#" + $form.attr("id") == attr) {
    $(attr).addClass("active");
    $container.isotope('layout');
} else {
    $form.removeClass("active");
    $container.isotope('layout'); 
}

到此：

$form.removeClass("active");
$(attr).addClass("active");
$container.isotope('layout');

<强> jsFiddle example

你的条件是否有效，但无论如何都是无关紧要的，因为你甚至不需要if。当您单击某个链接时，只需从所有div中删除该类，然后通过您使用$form.removeClass("active");抓取的href属性将其添加到所需的类中。请注意，您可能还希望通过在代码中添加preventDefault()来阻止与单击书签锚相关联的页面跳转。

Answer 2

你必须循环你的.form;）

文档：http://api.jquery.com/jquery.each/

Answer 3

你可以这样做：

$(".nav a").click(function() {
    $(".form").removeClass("active");

    var id = this.href;
    $(id).addClass("active");
});

Answer 4

你可以尝试这个：

$(".nav a").click(function(){

    // At first remove the class called active from all the 
    // elements that have as a class the form
    $(".form").removeClass("active");

    // Get the href attribute's value of the clicked anchor.
    var formId = $(this).attr("href");

    // add the class active to the selected form.
    $(formId).addClass("active");
});

Answer 5

尝试使用以下代码：

$(".nav a").click(function(){
    var attr = $(this).attr("href");
    $(".form").each(function(){
        if ("#" + $(this).attr("id") == attr) {
            $(attr).addClass("active");
            $container.isotope('layout');
        } else {
             $form.removeClass("active");
             $container.isotope('layout'); 
        }
    });
});

Answer 6

以这种方式尝试

$(".nav a").click(function(){

      var attr = $(this).attr("href").replace("#", "");;
      $('.form').removeClass("active");
      $('.form[id=' + attr ']').addClass("active");
});

首先获取没有#的href值。然后从所有active元素中删除.form类。最后，使用.form相等的id变量获取attr，并为其active类提供。

Answer 7

我想与此问题分享不同的答案/方法（更短的代码）。

jQuery：

$(".nav a").click(function(){

   var attr = $(this).attr("href");
   $(attr).show();
   $(attr).siblings(".form").hide();


});

DEMO HERE： http://jsfiddle.net/8u7n2/

Answer 8

You can try this one..  

  <!DOCTYPE html>
    <html>
      <head>
      </head>

      <body>
    <div class="form" id="form1">ABC</div>
    <div class="form" id="form2">XYZ</div>
    <div class="form" id="form3">PQR</div>

    <div class="nav">
         <a href="#form1">click to see #form1</a>
         <a href="#form2">click to see #form2</a>
         <a href="#form3">click to see #form3</a>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $(".nav a").click(function(){
        $(".form").removeClass("active");
        var attr = $(this).attr("href");
        $(attr) .addClass("active");

    });
    });

    </script>
    <style>
    .active
    {
      background-color: red;
    }

      </style>
      </body>

    </html>

see this

根据点击链接attr jQuery显示div

8 个答案: