jquery - 导航栏切换在 ASP.Net 中的母版页上不起作用-6ren

jquery - 导航栏切换在 ASP.Net 中的母版页上不起作用

转载作者：行者123 更新时间：2023-11-28 04:16:37

我第一次在 Asp.net 中尝试母版页。我在名为 site.master

的母版页中添加了导航栏

这是我的代码:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Rabik.Site" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">


    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar navbar-toggle navbar-collapse-fixed-top" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="navbar navbar-default navbar-fixed-top" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search" />
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server">
    </asp:ContentPlaceHolder>
</form>
</body>
</html>

Navbar is showing on maximize. But when reduce the window size. that collapse opened by default. That span line is not appearing

最佳答案

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
            
           </style>
           </head>
           <body>
          <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar navbar-toggle navbar-collapse-fixed-top" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="navbar navbar-default navbar-fixed-top" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search" />
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
            </body>
  </html>

工作正常...您必须在页面中添加两次 bootstrap css js 文件。

也按这个顺序添加文件--

<link href="css/bootstrap.css" rel="stylesheet" />
 <script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>

关于jquery - 导航栏切换在 ASP.Net 中的母版页上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42459254/

文章推荐： javascript - 点击不同区域并隐藏div

文章推荐： html - css 更改复选框和单选按钮不显示任何内容

文章推荐： javascript - 鼠标悬停效果仅在中的上

文章推荐： c++ - 在树中我得到错误没有匹配函数调用函数但是我使用模板正确地完成了它

asp.net - ASP.Net MVC 与经典 ASP 有何不同(不是 ASP.Net——原始 ASP)
我试图对 ASP.Net MVC 有一个高层次的理解，我开始意识到它看起来很像原始的 ASP 脚本。过去，我们将“模型”/业务逻辑代码组织到 VBScript 类或 VB COM 组件中。当然，现在

asp.net - ASP Repeater 前面的项目总数 asp
我已经搜索了一段时间，但似乎找不到答案。我想在我的旋转木马中显示一个计数器，左边是当前项目(工作)，左边是项目总数。我的代码:

asp.net - ASP/ASP.NET 短标记的名称
. 最佳答案 Scott Gu 称这些为代码块。这就是我的看法。 http://weblogs.asp.net/scottgu/archive/2010/04/06/new-lt-gt-syntax

asp.net - 我可以将 asp.net 4.0 与经典 asp 结合使用，还是可以将经典 asp 转换为 asp.net？
我有一个使用 Visual Studio 2010/.net 4/VB 制作的网站。我真的很喜欢我发现的 FAQ 系统的布局，因为它很简单，但它是经典的 asp。所以，显然，我不能包括我的母版页布局

asp.net - 为什么 ASP.NET ViewState 保留为 asp :dropdownlist but not an asp:table?
好吧，对于你们许多人来说，这个问题可能有一个非常明显的答案，但它让我难住了。我有一个 asp.net Web 表单，上面有两个控件(嗯，不止这两个，但我们将重点关注这些) - 第一个是 asp:dr

asp.net - asp :UpdatePanel with an ASP. NET 复选框触发器
当我将 ASP.NET 复选框控件设置为 asp.net 更新面板的异步回发触发器时，EventName 属性是什么？最佳答案我相信它是 CheckedChanged。关于asp.net - a

asp.net - 结合经典的 asp 和 asp.net
我有一个用经典 asp 编写的(巨大的)网站。现在我必须切换到 vb.net (razor)。有没有办法将这两个结合起来直到切换完成？有没有办法让应用程序与经典的 asp 和 vb.net 一起工作

asp.net - ASP.NET 页面中的各种 asp 控件
I am creating a products page, where the user selects an option in a radiobuttonlist for example, an

asp.net - 哪个性能最好 : Classic ASP, ASP.NET WebForms 或 ASP.NET MVC？
我最近将一个经典的 ASP 应用程序转换为 ASP.NET 3.5，但我觉得我的经典 ASP 版本要快一些(我不知道可能买家会后悔)。所以你们能帮我解决这个问题吗，让我知道哪个更快，asp、asp.

asp.net - 我无法准确理解 ASP 是什么以及如何上传 ASP 网站
从本周开始，我被要求开始学习如何使用 ASP 开发网站。我通过 XNA 对 C# 有一定的经验，所以这部分对我来说并不是什么麻烦。我一直在关注Music Store Tutorial这需要我设置一个

asp.net - 新项目如何从 ASP.Net 转向经典 ASP
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques

asp.net - 如何将页面从 ASP.NET 发布到经典 ASP
我想将一些表单变量发布到经典 ASP 页面中。我不想改变经典的 ASP 页面，因为需要完成大量的工作，以及消耗它们的页面数量。经典的 ASP 页面需要将表单变量 Username 和 Userpas

asp.net - 有什么好的引用资料或工具可用于将 ASP 转换为 ASP.NET？
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便

asp.net - ASP.NET/ASP.NET MVC中类似SSI的功能
在某种程度上，这可能是一个异端问题。我们有一个大型站点，其中许多页面仍在ASP中。通常，并没有真正动态的，而是包括(通过SSI或Server.Execute)定期重新生成的HTML块。看起来好像是一个

asp.net - asp 和 asp.net 之间的区别
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques

asp.net - ASP --> ASP.Net : Refactoring steps
我有一个遗留的 ASP 应用程序——在不久的某个时候——需要迁移到 ASP.Net 2.0(以与也在 2.0 中的其他应用程序兼容)。对于这类事情是否有最佳实践，即作为第一步将当前 html、vbs

asp.net - 将经典 ASP 和 ASP.NET Web 窗体转换为 ASP.NET MVC
我目前在一家公司工作，该公司使用 ASP.NET Webforms 和旧 ASP 页面的组合进行 Web 开发。这对于他们当前的项目来说效果很好，但我想说服/建议他们切换到 ASP.NET MVC，因

asp.net - 将表单从 asp 发布到 asp.Net
我有一个经典的 asp 应用程序。我想将该页面的竞赛表格发布到 Asp.Net 表格。原因是我想在进入数据库之前使用我在 Asp.Net 页面中内置的大量逻辑进行验证，而我对 asp 不太了解。更不用

asp.net - ASP.NET 移动 View 是否仅适用于 ASP.NET MVC？或者它们也可以在普通的 ASP.NET 中使用？
我知道在 ASP.NET MVC 中，您可以拥有移动 View 并执行类似 Index.mobile.cshtml 的操作。和 _Layout.mobile.cshtml并且服务器知道将这些 View

asp.net - 从 C# ASP.Net 调用经典 ASP
我需要从一些服务器端 c#.net 代码中调用经典 asp 页面上的 VBscript 函数 - 有谁知道一种干净的方法来做到这一点？在 .net 中重写函数不是一种选择。我会再解释一下这个问题..

行者123

个人简介
我是一名优秀的程序员,十分优秀！

作者热门文章

html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？

JMeter 在响应断言中使用 span 标签的问题

html - 在 :hover and :active? 上具有不同效果的 CSS 动画

html - 相对于居中的 html 内容固定的 CSS 重复背景？

滴滴打车优惠券免费领取

全站热门文章

MySQLlinux下安装,配置,免密登录与基本认识

挖矿病毒处理流程（门罗币）

【linux】【docker】Docker默认网段配置导致无法访问

彻底理解IP地址，子网掩码，子网划分

将双通道音频转换为两条单通道音频的解决方案

NuxtKit中的模板处理

HiveServer2文件描述符泄漏

深入理解Java对象结构

JavaPom两个模块需要互相引用怎么办

RAG+Agent人工智能平台：RAGflow实现GraphRA知识库问答，打造极致多模态问答与AI编排流体验

首页

博学

6Ren·AI

商城

jquery - 导航栏切换在 ASP.Net 中的母版页上不起作用