0

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

这就是我所拥有的：

http://pastebin.com/Lp2aWFPy

我真的很想上课。

多谢你们！

4

5 回答 5

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

于 2013-07-25T09:30:54.800 回答
1

您可以考虑为此使用 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 的经验，请参阅.

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

于 2013-07-25T09:34:12.737 回答
0

尝试这个

<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>
于 2013-07-25T09:30:28.527 回答
0

如果您乐于使用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/

于 2013-07-25T09:39:42.620 回答
0

服务警报消息 div 的onclick将可见，然后单击隐藏它将消失。这是代码 

 <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 对吗？

于 2013-07-25T09:47:55.683 回答