导航栏链接不起作用

Question

I am making a website using bootstrap. I have made a nav bar where I want the menu items to link to the different sites. However it is not working at all - it is usually never a problem getting links to work, but I am new in using Bootstrap and i feel like I'm missing something - do you need to have a js code to get your links to work? Normally I just write something like I have put all the sites in the same folder and I have tried so many things now. I have also tried giving the items and ID and then adding a js code, but nothing happens.

 $(document).ready(function() { $('#aboutus').on('click', function() { location.href = "About kopi.html"; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <div class="container-fluid"> <nav class="row navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Name</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="Portfolio.html">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="About kopi.html" id="aboutus">About</a> </li> </ul> </div> </nav> </div> 

Answer 1

Hi Maria and welcome to Stack Overflow.

The syntax for your a tag is correct. And thus it should work.

Saying that your link doesn't work, is extremely vague. What you could try:

• Make sure all your styles and scripts from Bootstrap are loaded. (This includes dependencies such as jQuery and Popper.js)
• Make sure the pages you're referring actually exist. (Does this file: Portfolio.html exist?)

Answer 2

It looks like you're using some classes that are specific to Bootstrap 4 in your markup, but including the Bootstrap 3 JS and CSS.

Try using the Bootstrap 4 files instead:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"/>

Here's a fiddle I created to try to reproduce your problem. It seems to work with the Bootstrap 4 files:

https://jsfiddle.net/bbz0t198/