點擊顯示/隱藏

我有一個區域的空間和兩個文本的文本顯示。我在這個區域上方有兩個「超鏈接」，並希望使用這些來顯示/隱藏下面的文本。在第一次加載頁面時，除了這兩個鏈接外，什麼都不會顯示。當你點擊一個鏈接時，它會顯示文本的主體。當你點擊另一個鏈接時，它會隱藏前面的文本並顯示新的文本。只有兩個超鏈接，但我希望用戶能夠方便地來回切換。這可能嗎？以前，我使用JavaScript來取消隱藏文本，因爲它們位於兩個不同的區域。我也不是有寫代碼的經驗。我在這個主題上發現了其他一些有用的答案，但其中大多數使用按鈕和點擊監聽器。有沒有辦法使用超鏈接來做到這一點？代碼示例非常感謝！點擊顯示/隱藏

來源

2012-02-09 MrsSecker

您可以在CSS中定義一個「不要在此處顯示文本」的類，然後使用超鏈接中的JS點擊來切換元素的類？

所以你的HTML將包含：

<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a> 
<div id="text1" class="hide"> text1 </div> 
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a> 
<div id="text2" class="hide"> text2 </div>

你的CSS將包含：

div.hide { display:none; [your properties]; } 
div.show { [your properties]; }

和你的JS會是這個樣子：

function showText(show,hide) 
{ 
    document.getElementById(show).className = "show"; 
    document.getElementById(hide).className = "hide"; 
}

在這是否幫助所有？

來源

2012-02-09 15:25:44 Link19

只是好奇：這是多麼便攜''：href =「javascript：void（0）;」'？我從來沒有聽說過它，但它聽起來不錯:) – 2012-02-09 15:29:25

這完全是我所需要的！對於其他可能想要使用它的用戶，在[你有第二個鏈接（'text'，'text1'），而不是（'text2'，'text1'）]的html [否則，它絕對完美，正是我所要求的！謝謝！！ – MrsSecker 2012-02-09 15:57:14

有一個漂亮的jQuery的腳本，並沿着這些線路的東西，一看，看它是否是任何對你有好處：

http://api.jquery.com/slideToggle/

來源

2012-02-09 15:13:40 davidjwest

這是可能的，但這樣做的更加用戶友好的方式會像jquery選項卡一樣。使用jQuery UI的選項卡功能很容易，它只是運行.tabs（）;腳本的HTML標記。作爲標籤元素ID的函數。

這裏是一個鏈接：Jquery Tabs在JavaScript

來源

2012-02-09 15:13:42

替代方法是在鏈接的ID上放置一個函數處理函數，並阻止它的默認操作，然後body1.hide（）;和body2.show（）等。 – 2012-02-09 15:15:24

<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"> </a>

如果你使用jQuery你可以這樣做：

function myLinkButtonClick() 
{ 
    $("#myDiv").hide(); 
}

或

function myLinkButtonClick() 
{ 
    $("#myDiv").show(); 
}

或者你可以做.toggle

function myLinkButtonClick() 
{ 
    $("#myDiv").toggle(); 
}

來源

2012-02-09 15:17:36 Etch

使用jQuery時，不需要在HTML中使用onclick。事件可以直接綁定。 – 2012-02-09 15:25:28

許多人會同意使用錨定標籤來執行Javascript（並且別無其他）會有點麻煩，因爲除了別的以外，它會在地址欄中生成一個可以混淆用戶的哈希標記。這並不是說他們在JS執行中沒有自己的位置。

然而，這是很有可能實現的。這裏是一個可能的解決方案：

<a href="#" onclick="show('div1')">Link1</a> 
<a href="#" onclick="show('div2')">Link2</a> 

<div id="div1">Text1</div> 
<div id="div2" style="display:none;">Text2</div> 

<script> 

    var currentDiv = document.getElementById("div1"); 
    function show(divID) { 

     var div = document.getElementById(divID); 

     currentDiv.style.display = "none"; 
     div.style.display = "block"; 

     currentDiv = div; 
    } 

</script>

的script標籤定義的變量和函數：currentDiv，它引用了當前顯示的div元素和show功能，其用於隱藏當前顯示的div和顯示一個新的一。

單擊頂部的錨點標籤時，將調用show函數，將當前顯示的元素替換爲錨點標記指定的元素。

爲了讓元素顯示/隱藏，代碼更改元素的CSS display屬性。值block顯示div元素，值none將其隱藏起來。當頁面加載時，第二個div的display屬性設置爲none。當鏈接被點擊時，Javascript會改變這個屬性。

不，你不需要JQuery來做到這一點，但它可以提供幫助。

來源

2012-02-09 15:25:27

製表符將是最好的方式來做到這一點。有很多關於jQuery選項卡的教程 - 這裏有一個fairly basic one概述了很好的概念，here's a more advanced one（它使用CSS在選項卡上生成圓角）。

來源

2012-02-09 15:25:53 whostolemyhat

點擊顯示/隱藏

回答

相關問題