Question

我的网站有一个隐藏/取消隐藏的菜单，如果点击了一个按钮。我的目标是设置一个密码框，如果密码正确，将显示菜单中的链接，如果密码错误，则将其隐藏起来。安全性不是我列表中最大的项目，我只是想看看它是否有效。此外，我希望它显示链接，而无需重新加载整个页面。可以这样做吗？

这是菜单的一些html代码：

 <a id="menu-toggle" href="#" class="btn btn-light btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
    <ul class="sidebar-nav">
        <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
        <li class="sidebar-brand">
            <x <font size="2"><font FACE="american typewriter">Title</font> </font></x>
        </li>
        <li>
            <a href="#about" onclick = $("#menu-close").click(); >Hello.</a>
        </li>
        <li>
            <a href="Link1" onclick = $("#menu-close").click(); >hi.</a>
        </li>
         <li>
            <a href="link2" onclick = $("#menu-close").click(); >Math</a>
    </ul>
</nav>

Answer 1

这样的事情？ http://jsfiddle.net/swm53ran/341/（密码为＆＃34;正确＆＃34;用于演示目的

的javascript：

function submit() {
    var pw = document.getElementById('password').value;
    var menu = document.getElementById('menu');
    if(pw == 'CORRECT') {
        menu.className = "";            
    }
    else {
        menu.className = "hide";
    }
};

HTML：

<input type="text" id="password"/>
<br/>
<button id="submit" onclick="submit()">Submit</button>
<br/>
<br/>
<ul class="sidebar-nav hide" id="menu">
    <li class="sidebar-brand">
        Title
    </li>
    <li>
        <a href="#about" >Hello.</a>
    </li>
    <li>
        <a href="Link1">hi.</a>
    </li>
    <li>
        <a href="link2">Math</a>
    </li>
</ul>

的CSS：

.hide(
    display:none;
)

使用密码隐藏/取消隐藏菜单链接

1 个答案: