[英]showing and hiding multiple divs using JavaScript dynamically
Here I have four td
s which are clickable and I have four more td
s which have id
s and concerned data within them. 在这里,我有四个可点击的td
,还有四个td
,其中包含id
和相关数据。 I want to display data when concerned clickable td
s are clicked. 我想在单击有关可点击的td
时显示数据。 This I want to do using JavaScript. 我想使用JavaScript做到这一点。
Here is my JavaScript code: 这是我的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';
};
Is this that you need? 这是您需要的吗?
http://jsfiddle.net/f8VL8/11/ 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;
}
rewrite in jquery version 用jQuery版本重写
http://jsfiddle.net/f8VL8/13/ http://jsfiddle.net/f8VL8/13/
$('.content').click(function(){
var target = $(this).attr('href');
//console.log(target);
if(target){
$('.result td').hide();
$(target).show();
}
});
<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>
On left side in JSfiddle, change onLoad
to no wrap (head)
and your script will work. 在JSfiddle的左侧,将onLoad
更改为no wrap (head)
,您的脚本即可使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.