如何使用 jquery 隐藏用于签名页面的导航栏，以便共享布局仍显示在其他文档上？

Posted 2023-02-26

【中文标题】如何使用 jquery 隐藏用于签名页面的导航栏，以便共享布局仍显示在其他文档上？

【英文标题】：How to hide nav bar for signing page using jquery so that shared layout still shows on other documents?

【发布时间】：2019-08-19 12:27:10

【问题描述】：

我有一个粗略的想法，通过使用 jquery 我可以隐藏某些 html div。所有页面的导航栏都有一个共享布局，但我不希望它仅在他们按下提交后才显示在初始登录页面中，并且它在导航栏显示时有效

我尝试在我的登录页面中调用文档，然后在具有该类的对象上调用 hide。

这是我的 NavBar 定义，它刚刚随项目提供

   <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="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">HomeRepair</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

我在登录视图底部添加了这个脚本标签

   <script> $(document).ready(function ()  $("navbar navbar-inverse navbar-fixed-top").hide() );
</script> 

一旦我重建了项目，导航栏就没有隐藏

【问题讨论】：

而不是 $(document).ready(function () $("navbar navbar-inverse navbar-fixed-top").hide() 就像 $(document).ready(function () $(".navbar").hide() 那样做

How can I select an element with multiple classes in jQuery?的可能重复

【参考方案1】：

你可以像下面那样做

<script> $(document).ready(function ()  $(".navbar").hide() );

或

<script> $(document).ready(function ()  $(".navbar-fixed-top").hide() );

或者

不要在登录页面中包含navbar 代码，如果您正在处理多个页面，例如用于登录和其他欢迎的页面

类由. 表示，ID 由# 表示，用作jquery 中的选择器

【讨论】：

嘿，谢谢你的回复，是的，我对 jquery 不好，我只是在几个小时前才开始了解它。我想知道我找到的解决方案是否更好，因为它在技术上不会构建 narbar，除非它不在页面上的登录上，否则会显示

【参考方案2】：

有两种方式：

使用您现有的 css 类“导航栏”

<script>
    $(document).ready(function () 
        $(".navbar").hide();
    );
</script>

为您的导航栏添加一个 id：

<nav id="navBar" class="navbar navbar-inverse navbar-fixed-top">

并按如下方式更改您的 js 代码：

    <script>
        $(document).ready(function () 
            $("#navBar").hide();
        );
    </script>

jQuery #id 选择器使用 HTML 标记的 id 属性来查找特定元素，.class 选择器使用特定类查找元素。

您可以在此处找到有关 JQuery 选择器的更多信息：W3School: jQuery Selectors

【讨论】：

或者更好，learn about selectors from jQuery itself，如果您不喜欢广告。

@HereticMonkey 谢谢，显示 jquery 你必须通过 id 而不是类来选择？ p.s 你有没有看到新的 blazor 东西我等不及了，我也找到了一个不同的解决方案，它不会将导航栏暴露给登录页面

@Darman 不，您不必按 id 而不是 class 选择。不知道你是如何从我的评论中得到的。

@HereticMonkey 度过了漫长的一天，我想我的意思是使用类或 id 哪个更好？就像我知道列表和字典一样，字典的查找速度更快，使用一个比另一个有一些优势

听起来像是一个新问题，虽然之前有人问过这个问题：What's the difference between an id and a class?, Which method is better? CSS classes or ID's?

【参考方案3】：

您好，谢谢您的回答，我设法以不同的方式实现它，因为我只想为除登录名（主页）之外的所有其他页面显示它，所以我将整个导航栏包装在 if 语句中并以是否不是首页则显示栏

  @if (ViewContext.RouteData.Values["controller"].ToString() != "Home")

但我想知道这个或 jquery 选择器方法是否更好