帮我实现点击html的一个按钮在按钮上弹出选择框实现网页页面的多渠道分享代码怎么写
以下是一个简单的实现点击按钮弹出选择框的示例代码:
HTML代码:
<button id="shareBtn">分享</button>
<div id="shareBox" style="display:none;">
<a href="#" id="shareWechat">分享到微信</a>
<a href="#" id="shareWeibo">分享到微博</a>
<a href="#" id="shareQQ">分享到QQ</a>
</div>
JS代码:
// 获取按钮元素和选择框元素
var shareBtn = document.getElementById('shareBtn');
var shareBox = document.getElementById('shareBox');
// 给按钮元素绑定点击事件
shareBtn.addEventListener('click', function() {
// 如果选择框元素已经显示,则隐藏它;否则显示它
if (shareBox.style.display === 'none') {
shareBox.style.display = 'block';
} else {
shareBox.style.display = 'none';
}
});
// 给选择框中的每个分享链接绑定点击事件
var shareWechat = document.getElementById('shareWechat');
var shareWeibo = document.getElementById('shareWeibo');
var shareQQ = document.getElementById('shareQQ');
shareWechat.addEventListener('click', function() {
// 分享到微信的代码
alert('分享到微信');
});
shareWeibo.addEventListener('click', function() {
// 分享到微博的代码
alert('分享到微博');
});
shareQQ.addEventListener('click', function() {
// 分享到QQ的代码
alert('分享到QQ');
});
以上代码实现了点击按钮弹出选择框,并且选择框中的每个分享链接都绑定了点击事件,可以根据需要修改其中的分享链接和分享代码。
原文地址: https://www.cveoy.top/t/topic/Ymb 著作权归作者所有。请勿转载和采集!