隐藏/取消隐藏带有密码的菜单链接

hide/unhide menu links with password

本文关键字：隐藏 菜单 链接 密码 取消      更新时间：2023-09-26

我的网站有一个菜单，隐藏/unides的基础上，如果一个按钮被点击与否。我的目标，是有一个密码框，将显示在菜单中的链接，如果密码是正确的，并保持它们隐藏，如果它是假的。安全还不是我清单上最大的项目，我只是想看到它的工作。此外，我希望它显示的链接，而不必重新加载整个页面。这能做到吗?

下面是菜单的一些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>

像这样?http://jsfiddle.net/swm53ran/341/(用于演示的密码为"正确"

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;
)
相关文章：