Show Div Onclick按鈕

-1

我有多個按鈕，每個按鈕都顯示一個主題名稱。示例：英語，數學，社交，法語等。Show Div Onclick按鈕

單擊這些按鈕中的任意一個，就會顯示內容。內容對每個按鈕（主題）都是唯一的。我只有一個div容器。當選擇特定按鈕時，會顯示相應的內容，並且當顯示下一個按鈕時，當前內容應該由新按鈕內容替換，並且所有這些都應該在僅點擊時發生。

對於java腳本和查詢很新穎，請儘量幫助我。

這裏是我的HTML

<div id="graybox"> 
    <button type="button">English</button> 
    <button type="button">Math</button> 
    <button type="button">French</button> 
    <button type="button">Social</button> 
</div> 

<div id="whitebox"> 
    on click of the subject above, respective content will be shown here, 
</div>

PS：受試者將來自數據庫，也可以是5個科或8或任何號碼。所以主題名稱和編號不固定。

來源

2013-04-08 user1165077

發表您的HTML .. – bipen 2013-04-08 09:53:04

創建[小提琴]（http://jsfiddle.net） – 2013-04-08 09:56:57

'的英文_content /數學/法語/ social_'它是如何維護的？ – Jai 2013-04-08 10:06:56

使用display：none製作一個CSS類，並將其應用於div，然後通過Javascript將按鈕上的div從類中移除。如果您需要更詳細的幫助，請發佈HTML。

來源

2013-04-08 09:56:34 user1983983

使用此

HTML

<div class="container"> 
    <ul> 
     <li><button>English</button> <span>English Description</span></li> 
     <li><button>Maths</button> <span>Maths Description</span></li> 
     <li><button>Social</button> <span>Social Description</span></li> 
     <li><button>French</button> <span>French Description</span></li> 
    </ul> 
</div>

jQuery的

$("button").click(function() { 
    $(this).siblings("span").show(); 
});

DEMO

來源

2013-04-08 09:57:23 Sowmya

我不能使用它，因爲我只有一個容器，一旦我點擊數學按鈕，英語內容應該被數學內容替換，在同一個容器上。 – user1165077 2013-04-08 09:59:06

<div class="container"> 
    <ul> 
     <li><button>English</button> <span>English Description</span></li> 
     <li><button>Maths</button> <span>Maths Description</span></li> 
     <li><button>Social</button> <span>Social Description</span></li> 
     <li><button>French</button> <span>French Description</span></li> 
    </ul> 
</div> 
<div id="subtext"> 
</div>

JS FIDDLE

$("button").click(function() { 
$('#subtext').html($(this).next().html()); 
});

來源

2013-04-08 10:02:02 rahularyansharma

試圖找到文本，我想你的div相同的ID與按鈕上的文字一樣

<button type="button">English</button>

對應的話，我猜的股利是

<div id="English">English Content</div> etc。

如果是這種情況，那麼你可以試試這個：

$("#graybox button").click(function() { 
    var div2show = $(this).text(); 
    $('#whitebox').find(div2show).show().siblings().hide(); 
});

來源

2013-04-08 10:18:29 Jai

Show Div Onclick按鈕

回答

相關問題