Question

我有这些HTML代码：

<div id="overlay" style="width: 100%; height: 100%; position: fixed; background-color: bisque; z-index: 2; opacity: 0.5; top: 0; display: none"></div>

<div id="form" style="display: none; z-index: 3">

<div class="tooltip" onclick="show('form')" style="cursor: pointer;"><a><i class="fa fa-envelope" aria-hidden="true"></i></a><span class="tooltiptext">Offer Suggestions</span></div>

一个功能：

function show(target){
    document.getElementById(target).style.display = 'block';
}

function hide(target){
    document.getElementById(target).style.display = 'none';
};

点击.tooltip时，只显示#form。

如何在此功能的点击基础上同时显示#overlay和#form？

这是我的第一篇文章，对由此带来的任何不便表示歉意。

Answer 1

不要将参数作为Id传递，只需将id硬编码到函数中：

function show(){ // remove target var from function
    document.getElementById('form').style.display = 'block';
    document.getElementById('overlay').style.display = 'block';
}

function hide(){
    document.getElementById('form').style.display = 'none';
    document.getElementById('overlay').style.display = 'none';
};

然后更改你的onclick也没有目标：

<div class="tooltip" onclick="show()" style="cursor: pointer;"><a><i class="fa fa-envelope" aria-hidden="true"></i></a><span class="tooltiptext">Offer Suggestions</span></div>

如何通过onclick同时显示这两个id？

1 个答案: