Fatal编程技术网
  • javascript/
  • Javascript 引导导航栏：有没有办法禁用一些菜单项，即使是某些页面的父菜单项？

Javascript 引导导航栏：有没有办法禁用一些菜单项，即使是某些页面的父菜单项？

javascript jquery css twitter-bootstrap twitter-bootstrap-3

Javascript 引导导航栏：有没有办法禁用一些菜单项，即使是某些页面的父菜单项？,javascript,jquery,css,twitter-bootstrap,twitter-bootstrap-3,Javascript,Jquery,Css,Twitter Bootstrap,Twitter Bootstrap 3,有没有一种方法可以对某些页面禁用某些菜单项和/或其父项，但是我对所有页面使用单个navbar.jsp，并且它在每个页面上都由javascript加载 NavBar.jsp <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header">

有没有一种方法可以对某些页面禁用某些菜单项和/或其父项，但是我对所有页面使用单个navbar.jsp，并且它在每个页面上都由javascript加载

NavBar.jsp

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a href="home.html" class="navbar-brand">SYSTRIX</a>
            </div>

                <div class="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Console<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="home.html">Home</a></li>
                                <li><a href="users.html">User Management</a></li>
                                <li><a href="patients.html">Patient Management</a></li>
                            </ul>
                        </li>   

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">New<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="userProfile.html">User</a></li>
                                <li><a href="patientsProfile.html">Patient</a></li>
                                <li><a href="#">Admission</a></li>
                            </ul>
                        </li>   

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">User Roles</a></li>
                                <li><a href="#">Patient Episode</a></li>
                                <li><a href="#">Patient Staff Assignment</a></li>
                            </ul>
                        </li>

                        <li><a href="#">Help</a></li>

                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search">
                            </div>
                                <button type="submit" class="btn btn-success">Submit</button>
                        </form>                     
                    </ul>
                </div>
        </div>
    </nav>
</body>



    

  • 

      

    • 

    • 

    • 

    

    • 

  • 

      

    • 

    • 

    • 

    

    • 

  • 

      

    • 

    • 

    • 

    

    • 

  • 
提交
脚本：

<script> 
$(function(){
  $("#includedContent").load("navbar.jsp"); 
});
</script> 


$（函数（）{
$（“#includedContent”）.load（“navbar.jsp”）；
});
我需要为某些.jsp页面禁用某些菜单项，例如，如果我在“添加新页面”，则编辑不应可用。谢谢你的帮助。

我想这对你会有用的：

您应该将代码部分更改为：

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit<b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#" id="userroles">User Roles</a></li>
        <li><a href="#" id="patientepisode">Patient Episode</a></li>
        <li><a href="#" id="patientstaff">Patient Staff Assignment</a></li>
    </ul>
</li>
我希望这会对您有所帮助。

有很多方法可以做到这一点，比如使用类您可以添加函数，因此加载完成后，它将触发该函数。在该函数中，您可以使用条件删除或添加类。。。给我们一些页面，上面有你想要禁用的菜单项或任何你想要的，我们会告诉你怎么做…@Ayadi我真的很感激。Roles.jsp、PatientEpisode.jsp和StaffAssignment.jsp将具有父编辑菜单。加载此页面时，Roles.jsp将有一个活动的用户角色菜单项处于活动状态，PatientEpisode.jsp将有患者事件菜单处于活动状态，StaffAssignment.jsp将有患者-员工分配菜单项可用。非常感谢您抽出时间谢谢你。我只需要使用.parent（）.addClass（'disabled'）；它成功了。非常感谢。：） 
$(document).ready(function(){
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);

if(filename == 'Roles.jsp'){
    $('#patientepisode').addClass('disabled');
    $('#patientstaff').addClass('disabled');
}else if(filename == 'PatientEpisode.jsp'){
    $('#userroles').addClass('disabled');
    $('#patientstaff').addClass('disabled');
}else if(filename == 'StaffAssignment.jsp'){
    $('#userroles').addClass('disabled');
    $('#patientepisode').addClass('disabled');
}
});