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

Question

在这里，我有四个td可点击的 s，还有四个td在其中包含ids 和相关数据的 s。我想在点击相关 clickable 时显示数据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/