Question

Here我有四个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/

使用JavaScript动态显示和隐藏多个div

3 个答案:

JS

HTML