使用JavaScript動態顯示和隱藏多個div

Question

在這里，我有四個可點擊的td ，還有四個td ，其中包含id和相關數據。 我想在單擊有關可點擊的td時顯示數據。 我想使用JavaScript做到這一點。

這是我的JavaScript代碼：

var _hidediv = null;
function showdiv(id) {
    var div = document.getElementById(id);
    div.style.display = 'block';
    if(_hidediv)
        _hidediv();
    _hidediv = function () {
         div.style.display = 'none';
    };

Answer 1

這是您需要的嗎？

http://jsfiddle.net/f8VL8/11/

var showed = 'news1';

function showdiv(id) {
    if(showed && showed !== id) {
        document.getElementById(showed).style.display = 'none';
    } 
    document.getElementById(id).style.display = 'block';
    showed = id;
}
​

Answer 2

用jQuery版本重寫

http://jsfiddle.net/f8VL8/13/

js

$('.content').click(function(){
    var target = $(this).attr('href');
    //console.log(target);
    if(target){
        $('.result td').hide();
        $(target).show();
    }
});

的HTML

<tr >
      <td><a href="#news1" class="content" >iCMS</a></td>
 </tr>
 <tr>
       <td><a href="#news2" class="content" >SMSC</a></td>
 </tr>
 <tr>
       <td><a href="#news3" class="content">SMS Gateway</a></td>
 </tr>
 <tr>
      <td><a href="#news4" class="content">WAP Gateway</a></td>
 </tr>

Answer 3

在JSfiddle的左側，將onLoad更改為no wrap (head) ，您的腳本即可使用。

http://jsfiddle.net/f8VL8/14/