当我使用Java单击链接时需要显示div

Question

对于不允许我使用alert或任何Js对话框的一些愚蠢的实践，我必须使以下魔术发生：

1.使用链接创建一个div，在这种情况下，该链接称为info。 2.制作一个不可见的div，这就是我的“ PopUp”，里面有一些垃圾信息。 3.当我单击链接信息时，不可见的div应该出现。

虽然简单，甚至相当明显，但我在弄清如何使这种事情发生的逻辑上遇到了一些麻烦。 如果它可以帮助我省掉面子，那么像1个月前一样，我刚刚开始编程。就和HTML CSS一样，我是整个Js领域的新手。

到目前为止，这是我的代码：

<div class="scroll-area" id="lista">
    <div class="box">
        <p>Item #1</p>
        <p class="info"><a href="#" id="lnkInfo">Info</p>
        </a>
        <p class="info"><a href="#">Take</p>
        </a>
    </div>
    <div class="box">
        <p>Item #2</p>
        <p class="info"><a href="#">Info</p>
        </a>
        <p class="info"><a href="#">Take</p>
        </a>
    </div>
</div>

the 吟声 “ PopUp”来了...

<div class="popUp">
    <ul>
        <li>BLA BLA</li>
        <li>BLA BLA/li>
        <li>BLA BLA</li>
        <li>BLA!</li>
    </ul>
</div>

CSS以防万一。

.popUp {
    position: absolute;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background-color: #ecf0f1;
    top: 100px;
    left: 100px;
    display: none;
}

.show {
    display: block;
}

而我将是JS的开端：

var elementPopUp = document.getElementById('lnkInfo');

elementoPopUp.addEventListener('click', validate);

function validate() {
    document.getElementById('popUp').className += ' show';
}

Answer 1

更新您的html代码修复中有语法错误，并且您正在使用getElementById获取元素，但是将popUp设置为类，将其更改为id

<div class="scroll-area" id="lista">
    <div class="box"> 
        <p>Item #1</p>
        <p class="info"><a href="#" id="lnkInfo">Info
        </a></p>
        <p class="info"><a href="#">Take
        </a></p>
    </div> 
    <div class="box">
        <p>Item #2</p>
        <p class="info"><a href="#">Info</a></p>

        <p class="info"><a href="#">Take</a></p>
    </div>
</div>
<div id="popup" >
    <ul>
        <li>BLA BLA</li>
        <li>BLA BLA</li>
        <li>BLA BLA</li>
        <li>BLA!</li>
    </ul>
</div>

和CSS

#popup {
    position: absolute;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background-color: #ecf0f1;
    top: 100px;
    left: 100px;
    display: none;
}

#popup.show {
    display: block;
}

和JavaScript

var elementPopUp = document.getElementById('lnkInfo');

elementPopUp.addEventListener('click', validate);

function validate() {
  var d = document.getElementById("popup");

  d.classList.add("show");
}

Answer 2

我相信如果您这样做：

<div class="scroll-area" id="lista">
         <div class="box">
            <p>Item #1</p>
            <p class="info"><a href="#" id="lnkInfo" onclick="validate()">Info</p></a>
            <p class="info"><a href="#">Take</p></a>
        </div>
        <div class="box">
            <p>Item #2</p>
            <p class="info"><a href="#">Info</p></a>
            <p class="info"><a href="#">Take</p></a>
        </div>
              </div>

并将javascript设为：

function validate(){

document.getElementById('popUp').style.visibility = 'visible';
 }

那应该工作。 我没有测试过，所以可能语法错误或错误两个。

Answer 3

这是一个如何通过JavaScript影响元素样式的示例：

的HTML

<a id="shower" href="">
    show
</a>

<br>
<a id="hider" href="">
    hide
</a>

<br>
<div id="popup" class="hide">Hello</div>

JS

document.getElementById("shower").addEventListener("click", function (e) {
    var myDiv = document.getElementById("popup");
    myDiv.className = "";
    e.preventDefault();
});

document.getElementById("hider").addEventListener("click", function (e) {
    var myDiv = document.getElementById("popup");
    myDiv.className = "hide";
    e.preventDefault();
});

的CSS

.hide {
    display: none;
}

Answer 4

这是我要做的简化版本：

HTML：

<a href="#" id="clickMe">clickMe</a>

<div id="showMe">showMe</div>

CSS：

display:none;

JavaScript：

document.getElementById("clickMe").onclick = function() {
    document.getElementById("showMe").style.display = "block";
}

这是显示效果的小提琴

希望这可以帮助 ;）