jquery让div出现点击时href点击

#tabs-1 { 
    display: none; 
}  

#tabs-2 { 
    display: none; 
} 

#tabs-3 { 
    display: none; 
} 

<script type="text/javascript">  
     $(document).ready(function() { 
      $(this).click(function() {  
       var a = $(this).find("a").attr("href"); 
       $(a).show(); 
      }); 
     }); 
</script> 

<body> 
<form id="form1" runat="server"> 
    <div class="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li>    
    </ul> 
    <div id="tabs-1"> 
     <h2>Content heading 1</h2> 
     <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Doin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
    </div> 
    <div id="tabs-2"> 
     <h2>Content heading 2</h2> 
     <p>Morbi tfhgdfahsdh</p> 
    </div> 
    </div>  
</form> 
</body>

我想做一个简单的jQuery脚本，使得这些div出现，当我点击有序列表中的ahref。当我运行这个代码时，它总是显示有序列表中的第一个元素。我想显示超链接中链接的元素。jquery让div出现点击时href点击

来源

2012-01-09 Chris Stewart

请尝试以下

$('div.tabs > ul > li > a').click(function(e) { 
    var id = this.getAttribute('href'); 
    $(id).toggle(); 
    e.preventDefault(); 
});

它使用选择divs.tabs ul li a选择有问题的锚标记，并增加了一个单击处理他们。点击它将使用href属性作为需要隐藏的DOM元素的ID。该e.preventDefault()线防止锚从它这将是试图找到它s href`默认操作

小提琴：http://jsfiddle.net/AWPFJ/3/

来源

2012-01-09 19:55:40 JaredPar

我怎么会让它再次隐藏点击不同的标签是什么时候？ – 2012-01-09 20:51:01

我使用选择来获取所有锚标记，是.tabs类的子类。在点击函数中，我使用它来引用clicked元素，并获取href-attribute的值。该值然后用作选择器来获取正确的div。点击功能将该事件作为参数接收，该参数可与.preventDefault()一起使用，以确保浏览器不会遵循链接。

$(document).ready(function() { 
    $("div.tabs ul li a").click(function (event) { 
     var id = $(this).attr("href"); 
     $(id).show(); 
     event.preventDefault(); 
    }); 
});

来源

2012-01-09 19:56:33

这也会将处理程序添加到出现在页面内容部分内的任何定位标记。我会让选择器更具体，以限制它的潜在影响 – JaredPar 2012-01-09 20:00:08

@JaredPar同意，我认为这是更多的例子。他可能最好通过在他的导航容器中添加一个id，并用它来选择。不过，我更新了选择器，在我的示例中更具体一些。 – 2012-01-09 20:04:49

总之，这应该这样做：

$(".tabs").find("a").click(function() { 
    $($(this).attr("href")).show(); 
    return false; 
})

您应该添加一个“标签”类所有选项卡，并添加以下还有：

$(".tabs").find("a").click(function() { 
    $(".tab").hide(); 
    $($(this).attr("href")).show(); 
    return false; 
})

来源

2012-01-09 19:59:21

第二段代码是做什么的？ – 2012-01-09 21:52:20

它会隐藏所有标签，然后显示您需要的标签，但是您需要将class =“标签”添加到所有标签。 – 2012-01-09 21:56:32

由于某种原因，它在我的默认选项卡（页面加载时加载的第一个元素）上无法正常工作，它最初显示的内容在点击时不会再显示。 – 2012-01-09 22:04:03

那是因为你的脚本是在整个文档上设置点击处理程序，并且第一个总是因此被选中。修改脚本以设置<元素或父元素<li>本身的点击处理程序，检索与href属性值对应的DIV并调用该DIV上的show（）方法。我没有机会测试，但它会是这样的：

$(document).ready(function() { 
    $('a').click(function() { 
     var a = $(this).attr("href"); 
     $(a).show(); 
    }); 
});

HTH，阿什温

来源

2012-01-09 20:02:40

jquery让div出现点击时href点击

回答

相关问题