Как перейти на страницу всех автомобилей в коде?

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 wizardry, поэтому, если у вас есть определенные атрибуты для вашего элемента, они добавят event.preventDefault() к событию click, не позволяя тегу <a> изменять страницы.

Резюме: вам нужно изменить это. Несмотря на то, что Bootstrap перекрывает навигацию по тегу <a>, он все равно не будет работать (потому что при переходе на другую страницу выбор меню будет потерян)

Если вы действительно хотите это сделать, вы можете добавить свои собственные javascript wizardry к перегрузке Bootstrap preventDefault().

1. Добавьте идентификатор к своему тегу <a>:

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

2. и добавьте jQuery / javascript:

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

Но, с другой стороны, меню Alll cars больше не будет открыто.