Question

所以我正在创建这个网站，我想要它，所以当你点击导航链接（超链接）时，它会显示一个div。

这就是我所拥有的：

我真的很喜欢上课。

谢谢你们！

Answer 1

试试这个解决方案：

<a href="#" onclick="document.getElementById('divbox').style.display='block'">Click</a>

<div id="divbox" style="display:none">divbox</div>

http://codepen.io/Chovanec/pen/ogtys

Answer 2

您可以考虑使用jQuery：

<强>的jQuery

$('.a_toggle').click(function() {

    $('.alert-message').toggle();

});

$('.a_hide').click(function() {

    $('.alert-message').hide();

});

<强> HTML

<li><a href="#" class="a_toggle">Services</a></li>

<div class="alert-message notice" style="display:none">You are already here! <a href="#" class="a_hide">Hide</a></div>

您可以点击“服务”隐藏/关闭菜单，当您点击“隐藏”时，菜单也会关闭。如果您没有使用jQuery的经验，请参阅this。

演示：http://jsfiddle.net/w3RzP/1/

Answer 3

试试这个

<a href="#" onclick="showDiv()"></a>

<div id="content" style="display:none">
</div>

js功能

function showDiv()
{
  document.getElementById("content").style.display = "block";
}

在您的代码中，您尝试将类设置为 head_alert 。但是没有名为head_alert的类名。它是一个id。所以你应该试试

<a onclick="document.getElementById('alert-message').id = 'head_alert'; return false;" href="#">Services</a>

已修改，或者您可以将 #head_alert 更改为 .head_alert

<a onclick="document.getElementById('alert-message').className = 'head_alert'; return false;" href="#">Services</a>

Answer 4

如果您乐意使用 jQuery 并让您的生活更轻松，您可以达到预期的结果：

<强> HTML

<ul>
    <li><a class="myLink" href="#">Services</a></li>
</ul>
<div class="alert-message notice">
    You are already here! <a class="myLink" href="#">Hide</a>
</div>

<强> CSS

.alert-message {
    display:none;
    position: relative;
    border: 1px solid #ddd;
    background-color: #F9F9F9;
    -webkit-box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1);
    -moz-box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1);
    box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1);
    font-weight: bold;
    padding: 10px 40px;
    margin-bottom: 20px;
}
.alert-message.error {
    background-color: #ffe9e9;
    border-color: #e99f9f;
    color: #d25c5a;
}
.alert-message.error a {
    color: #d25c5a;
    margin: 0 auto;
}

<强>的Javascript

$(function () {
    $("a.myLink").on("click", function (e) {
        e.preventDefault();

        $("div.alert-message").toggle();

        return false;
    });
});

工作链接：http://jsfiddle.net/j9EBS/

Answer 5

点击服务警告消息div，然后点击隐藏它将消失。这是代码

 <script type="text/javascript">
      function showDiv()
    {
      document.getElementById("alert-message").style.display = "block";
    }

      </script>

    <li><a onclick="document.getElementById('alert-message').style.display='block'" href="#">Services</a></li>

        <div id="alert-message" style="display:none;"> You are already here!
                                    <a onclick="document.getElementById('alert-message').style.display='none'; return false;" href="#">Hide</a>

                    </div>

您也可以查找Jquery，但是您需要简单的javascript吗？

点击打开一个类div

5 个答案: