所有栏目 | 云社区 美国云服务器[国内云主机商]
你的位置:首页 > 云社区 » 正文

用js怎么实现在同一框内,点击不同按钮显示不同内容?

发布时间:2020-04-12 09:02:49

资讯分类:框内  js  按钮  点击  元素  按钮  显示
用js怎么实现在同一框内,点击不同按钮显示不同内容?

你有用jQuery吗。如果是可以用delegate代理点击事件。如果没有,自己写一个,其实就是点击事件的冒泡。 <buttontype="button"data-target="#div1">显示id为div1的元素里的内容</button> <buttontype="button"data-target="#div2">显示id为div2的元素里的内容</button> 为你的每个要点击的按钮加上data-target属性(这是HTML5的data-*特性),假设这些按钮的共同父元素是 #button-wrap 那么就可以这样用代理 $('#button-wrap').delegate('button[data-target]','click',function(){ //获取存储在按钮上的作为jQuery选择器的target值 vartarget=$(this).data('target'); //在HTML5中也可以是vartarget=this.dataset.target //根据target指定的选择器,显示该元素 $(target).show(); });

用js怎么实现在同一框内,点击不同按钮显示不同内容?

你有用jQuery吗。如果是可以用delegate代理点击事件。如果没有,自己写一个,其实就是点击事件的冒泡。

为你的每个要点击的按钮加上data-target属性(这是HTML5的data-*特性),假设这些按钮的共同父元素是

#button-wrap

那么就可以这样用代理

$('#button-wrap').delegate('button[data-target]', 'click', function() {

// 获取存储在按钮上的作为 jQuery 选择器的 target 值

var target = $(this).data('target');

// 在 HTML5 中也可以是 var target = this.dataset.target

// 根据target指定的选择器,显示该元素

$(target).show();

});

留言与评论(共有 0 条评论)
   
验证码:
Top