根據單擊的鏈接attr jQuery顯示div
[英]Show div according to the clicked link attr jQuery
問題描述
現在有兩個小時，我一直在努力解決這個問題。 我需要的是，當單擊鏈接之一時，jQuery應該顯示與href屬性具有相同ID的div。
例如，如果我單擊第一個鏈接（ href="#form1" ），它必須顯示ID為＃form1的<div>
<script>
$(".nav a").click(function(){
var attr = $(this).attr("href");
var $form = $(".form");
if ("#" + $form.attr("id") == attr) {
$(attr).addClass("active");
$container.isotope('layout');
} else {
$form.removeClass("active");
$container.isotope('layout');
}
});
</script>
<div class="form" id="form1"></div>
<div class="form" id="form2"></div>
<div class="form" id="form3"></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>
我不確定為什么它不起作用。
8 個解決方案
解決方案1
2 已采納 2014-07-18 13:27:06
更改此代碼塊：
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');
您的if條件將不起作用，但這無關緊要，因為您甚至不需要if。 單擊鏈接時，只需從所有div中刪除該類，然后通過使用$form.removeClass("active");獲取的href屬性將其添加到所需的類中即可$form.removeClass("active"); 。 請注意，您可能還想通過向代碼中添加preventDefault()來防止與單擊書簽錨點相關的頁面跳轉。
解決方案2
0 2014-07-18 13:26:52
你必須循環你的.form ;）
解決方案3
0 2014-07-18 13:27:16
你可以做：
$(".nav a").click(function() {
$(".form").removeClass("active");
var id = this.href;
$(id).addClass("active");
});
解決方案4
0 2014-07-18 13:28:58
您可以嘗試以下方法：
$(".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");
});
解決方案5
0 2014-07-18 13:29:25
嘗試使用以下代碼：
$(".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');
}
});
});
解決方案6
0 2014-07-18 13:31:37
以這種方式嘗試
$(".nav a").click(function(){
var attr = $(this).attr("href").replace("#", "");;
$('.form').removeClass("active");
$('.form[id=' + attr ']').addClass("active");
});
首先獲取沒有#的href值。 然后從所有.form元素中刪除active類。 最后獲得id等於attr變量的.form並將其賦予active類。
解決方案7
0 2014-07-18 13:47:51
我想對此問題分享不同的答案/方法（較短的代碼）。
jQuery的：
$(".nav a").click(function(){
var attr = $(this).attr("href");
$(attr).show();
$(attr).siblings(".form").hide();
});
此處演示： http : //jsfiddle.net/8u7n2/
解決方案8
0 2014-07-18 13:51:30
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>
如何顯示與單擊鏈接相關的DIV，並使用Jquery隱藏其他DIV？
[英]How to show the DIV related with clicked link and hide other DIVs with Jquery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.