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

回答

相關問題