Question

主按钮菜单无法导航到超链接页面我该怎么做才能修复以下代码？它不会转到（Allcars.html）页面我认为切换与CSS冲突，因此单击只是显示下拉列表，从而阻止了超链接导航我按allcars.html页面的链接时需要做2件事 1下拉菜单，然后 2也打开该页面谢谢

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Simple Navbar with Search Box</title>
<link href="https://fonts.googleapis.com/css?family=Raleway|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/stylemob.css">

<nav class="navbar navbar-default navbar-expand-lg navbar-light">
    <div class="navbar-header d-flex col">  
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
            <span class="navbar-toggler-icon"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
        <ul class="nav navbar-nav">
            <li class="nav-item"><a href="index.html">Home</a></li> 
<li class="nav-item dropdown">
                <a data-toggle="dropdown" class="nav-link dropdown-toggle" href="Allcars.html">Alll cars<b class="caret"></b></a>
                <ul class="dropdown-menu">
                                        <li><a href="Cars.html">New Cars</a></li>
                                       <li><a href="Cars.html">Old Cars</a></li>
                                </ul>

Answer 1

在这种情况下，您不能同时执行这两项操作。当用户点击标签时：

<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="Allcars.html">Alll cars<b class="caret"></b></a>

浏览器应该立即切换到Allcars.html页面（但是菜单操作将会丢失）。

但是，Bootstrap是css和javascript向导的组合，因此，如果您在元素上具有某些属性，则它们会将event.preventDefault()添加到click事件中，从而防止<a>标记更改页面。

摘要：您需要重新设计。尽管Bootstrap超越了<a>标签导航，但还是不起作用（因为当您进入另一页面时，菜单选项将会丢失）

如果您确实想执行此操作，则可以添加一些自己的JavaScript向导来覆盖Bootstrap的preventDefault()。

向您的<a>标签添加ID：

<a id="aAllCars" data-toggle="dropdown" class="nav-link dropdown-toggle" href="Allcars.html">Alll cars<b class="caret"></b></a>

并添加一些jQuery / javascript：

    $('#aAllCars').click(function(){
        window.location = $(this).attr('href');
    });

但是，再次，Alll cars菜单将不再打开。

如何导航到代码中的所有汽车页面？

1 个答案: