Ahmed Abbas Ahmed Abbas - 2 months ago 17
Javascript Question

Bootstrap Tabs Links Not Working

My tabs are not working,every thing is fine .Links are not working properly,, please help.i try every method but no use.I try CDN , then local file also

<!DOCTYPE html>
<html lang="en">
<head>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">

<ul class="nav nav-stacked nav-justified">
<li class="active"><a href="#C" data-toggle="tabs">C#</a></li>
<li><a href="#home" data-toggle="tabs">Home</a></li>
<li><a href="" data-toggle="tabs">jQuery</a></li>
<li><a href="" data-toggle="tabs">PHP</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane fade in active" id="C">
<p>C# IS DEVELOPED BY MICROSOFT CORP IN 2000</p>
</div>

<div class="tab-pane fade" id="home">
<p>This is HOME</p>
</div>

</div>


</div>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Answer

You need to include jquery file to run the bootstrap i.e https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js . You do not need to add any other jquery code. And also data-toggle will be tab not "tabs".

    <ul class="nav nav-tab">
        <li class="active"><a href="#C" data-toggle="tab">C#</a></li>
        <li><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#" data-toggle="tab">jQuery</a></li>
        <li><a href="#" data-toggle="tab">PHP</a></li>
    </ul>