Question

我是HTML的新手，我试图使用bootstrap。我创建了一个下拉菜单，但它仅适用于index.html页面。

我也尝试使用以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<html>
    <head>
        <title>Tutorials</title>
        <meta charset="utf-8">
        <link rel="icon" type="image/png" href="img/coding.png"><!-- Favicon-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/tutorials.css" rel="stylesheet">        
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    </head>

    <body>
<!-- Menu which is on every page -->
<nav class="navbar navbar-fixed-top" id = "s">
<div class="container">
<div class="row">
<div class="col-md-7"> <!-- Bootstrapov grid sistem-->
    <div class="navbar-header"> <a href="index.html"><img src="img/coding.png" width="50" height="50" /></a> </div> <!-- Web Application Vulnerabilities-->
<!-- Hyperlinks to the sites -->
<div id="navbar" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li><a href="about.html"><span style="color:white">About Us</span></a></li>
        <li><a href="contact.html"><span style="color:white">Contact</span></a></li>
        <li><a href="register.html"><span style="color:white">Registration</span></a></li>
        <li class="dropdown">
            <a href="tutorials.html" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Tutorials<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="xss.html"><span style="color:black">XSS</span></a></li>
                <li><a href="csrf.html"><span style="color:black">CSRF</span></a></li>
                <li><a href="sql.html"><span style="color:black">SQL Injection</span></a></li>
                <li><a href="rce.html"><span style="color:black">RCE</span></a></li>
                <li><a href="exploit.html"><span style="color:black">Exploit</span></a></li>
            </ul>
        </li>
    </ul>
</div>
</div>
</div>
</div>

所以我也尝试在其他页面上使用它，例如about.html 遵守守则：

<!DOCTYPE html>
<html>
    <head>
        <title>About Us</title>
        <meta charset="utf-8">
        <link rel="icon" type="image/png" href="img/coding.png"><!-- Favicon-->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/about.css" rel="stylesheet">        
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    </head>
<body>
<!-- Menu which is on every page -->
<nav class="navbar navbar-fixed-top" id = "s">
<div class="container">
<div class="row">
<div class="col-md-7"> <!-- Bootstrap grid system-->
    <div class="navbar-header"> <a href="index.html"><img src="img/coding.png" width="50" height="50" /></a> </div> <!-- Web Application Vulnerabilities-->
<!-- Hyperlinks to the sites -->
<div id="navbar" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li><a href="about.html"><span style="color:white">About Us</span></a></li>
        <li><a href="contact.html"><span style="color:white">Contact</span></a></li>
        <li><a href="register.html"><span style="color:white">Registration</span></a></li>
        <li class="dropdown">
            <a href="tutorials.html" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Tutorials<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="xss.html"><span style="color:black">XSS</span></a></li>
                <li><a href="csrf.html"><span style="color:black">CSRF</span></a></li>
                <li><a href="sql.html"><span style="color:black">SQL Injection</span></a></li>
                <li><a href="rce.html"><span style="color:black">RCE</span></a></li>
                <li><a href="exploit.html"><span style="color:black">Exploit</span></a></li>
            </ul>
        </li>
    </ul>
</div>
</div>
</div>
</div>

它不起作用，它将我重定向到教程页面，下拉菜单将无法打开。我不知道如何解决它。

Answer 1

您似乎遇到了用于下拉列表的锚点的问题：

<a href="tutorials.html" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Tutorials<span class="caret"></span></a>

在此作为href，您添加了tutorials.html，这就是为什么每次点击它都会重定向到tutorial.html 将其更改为：

<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Tutorials<span class="caret"></span></a>

只需在该锚标记中更改href=#而不是href=tutorial.html

还添加：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

加载jquery。

HTML引导程序下拉菜单无法打开

1 个答案: