Javascript 单击打开一个类div

所以我正在制作这个网站，我希望当你点击一个导航链接（超链接）时，它会显示一个div

这就是我所拥有的：

我真的很想只上这些课

谢谢大家

试试这个

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

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

在代码中，您试图将类设置为head\u alert。但是没有名为head\u alert的类名。这是一个id，所以你应该试试

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

编辑：或者您可以将您的头部提醒更改为。头部提醒

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

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

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

        return false;
    });
});

尝试以下解决方案：

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

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

杂物箱

---

您可以考虑使用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>

<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>

你已经来了！

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

演示：

如果您乐于使用jQuery并使您的生活更轻松，您可以实现如下预期结果：

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>

<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>

Javascript

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

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

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

        return false;
    });
});

---

工作链接：

单击服务警报消息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>

函数showDiv（）
{
document.getElementById（“警报消息”）.style.display=“块”；
}

你已经来了！

---

您也可以查找Jquery，但您需要纯javascript，对吗？

对于将来的问题，JSFIDLE更有用。哦，好的，谢谢，从现在起我会这么做的。抱歉，如果它看起来很凌乱：/没问题，这只是一个建议！这个答案是不完整的。如问题所述，如何隐藏盒子？而且，更重要的是，OP想要依赖类，而不是ID。OP想要依赖类，而不是ID。相应地编辑：-）