As far as I can see I've followed a w3 example exactly regarding bootstrap tabs (https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp). However with my following code, the tabs don't change when clicked. The only tab displayed is the active tab. I'm not hugely familiar with bootstrap so I imagine the solution may probably be simple.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="js/login.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<!-- <div id="tabs" class="container"> -->
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#student">Student</a>
</li>
<li>
<a data-toggle="tab" href="#employee">Employee</a>
</li>
<li>
<a data-toggle="tab" href="#admin">Admin</a>
</li>
</ul>
<div class="tab-content">
<div id="student" class="tab-pane fade in active">
<h1>TEST</h1>
</div>
<div id="employee" class="tab-pane fade">
<h1>TEST2</h1>
</div>
<div id="admin" class="tab-pane fade">
<h1>TEST3</h1>
</div>
</div>
<!-- </div> -->
</div>
</body>
</html>
The example from W3 is not working either! Try this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="js/login.js"></script>
<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>
</head>
<body>
<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
TEST 1
</div>
<div role="tabpanel" class="tab-pane" id="profile">
TEST 2
</div>
<div role="tabpanel" class="tab-pane" id="messages">
TEST 3
</div>
<div role="tabpanel" class="tab-pane" id="settings">
TEST 4
</div>
</div>
</div>
</body>
</html>
And check: https://getbootstrap.com/docs/3.3/javascript/#tabs for more information
EDIT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
This line must go before bootstrap.min.js, like this:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Related
I am a complete beginner at html and I'm trying to follow along with bootstrap but it appears there is something fundamental that I am overlooking. My code will make the tabs but I cannot get it to switch between the two tabs.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Welcome to website</title>
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Data
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home">
<p>this is the home tab</p>
</div>
<div class="tab-pane fade" id="data">
<p>this is the data tab</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Seems to be just a naming issue.
Data
should be
Data
since the second tab's id is "data", not "profile".
I am trying to make my navigation bar clickable. For example when a user clicks data a data web page opens up. But in my code I am unable to do so. When I click the tab button nothing happens. Can someone help me so that when I click the tab button shows the content? Note I am using bootstrap nav-nav tab bar Below is my code below:-
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Sales</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/shop-item.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
<li><a data-toggle="tab" href="persons/data.html"> data </a></li>
<li><a data-toggle="tab" href="teams/teamI.html"> teams </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container-fluid">
<div class="row">
<div id= "mapContainer" class="col-md-12">
<div id="map-canvas"></div>
</div>
<div id = "panelContainer" class="col-md-3 hidden">
<div id="right-panel"></div>
</div>
</div>
</div>
<!-- /.container -->
<div class="container">
<hr>
</div>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You can make it simpler like below. But if you wanted to load another html into specific tabs then use jquery.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
<li><a data-toggle="tab" href="#data"> data </a></li>
<li><a data-toggle="tab" href="#teams"> teams </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container">
<h1>Home</h1>
</div>
</div>
<div id="data" class="tab-pane fade in">
<div class="container">
<h1>Data</h1>
</div>
</div>
<div id="teams" class="tab-pane fade in">
<div class="container">
<h1>Teams</h1>
</div>
</div>
</div>
Update: You can also add html inside your tabs using jQuery load
function.
Code looks like this:
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
<li><a data-toggle="tab" href="#data"> data </a></li>
<li><a data-toggle="tab" href="#teams"> teams </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container">
<h1>Home</h1>
</div>
</div>
<div id="data" class="tab-pane fade in">
<div class="container">
<h1>Data</h1>
</div>
</div>
<div id="teams" class="tab-pane fade in">
<div class="container">
<h1>Teams</h1>
</div>
</div>
</div>
<script>
$('#home').load('/home.html');
$('#data').load('/data.html');
$('#teams').load('/teams.html');
</script>
This is first time that my bootstrap tabs is not working my code is simple and everything looking OK but on my system it's not working.
Following is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabs </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane" id="profile">profile</div>
<div class="tab-pane" id="messages">messages</div>
<div class="tab-pane" id="settings">settings</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Add data-toggle="tab" to anchor
<!DOCTYPE html>
<html lang="ENG">
<head>
<!-- Required meta tags always come first-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a data-toggle="tab" href="#home" class="nav-link active">Active 1</a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#profile" class="nav-link">Active 2</a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#message" class="nav-link">Active 3</a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#settings" class="nav-link">Disabled</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="home">home</div>
<div class="tab-pane fade" id="profile">profile</div>
<div class="tab-pane fade" id="message">messages</div>
<div class="tab-pane fade" id="settings">settings</div>
</div>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
</body>
</html>
I designed a markup and i'm trying to make a tab on bootsrap with jquery. I wrote markup code as below. Please examine why the tabs are not working? What wrong with my code.
in javascript console it showing
ReferenceError: $ is not defined
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Just Live 24</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/tv-theme.css">
<link href="css/main_pricetable.css" rel="stylesheet">
</head>
<body>
<div class="col-md-6">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">bmnmn,b,mbn...</div>
<div class="tab-pane" id="profile">.werewr..</div>
<div class="tab-pane" id="messages">.jkhk..</div>
<div class="tab-pane" id="settings">llkjlk...</div>
</div>
<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})</script>
</div>
<hr>
</body>
</html>
Most probably you forgot to attach http in script src attribute.
src="http://code.jquery.com/jquery-1.11.0.min.js"
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"
As a result browser is unable to fetch scripts and is not recogizing jquery shorthand (i.e. $).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Tabs</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div class="col-md-6">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
</ul>
</div>
<div class="tab-content" style="margin-left:20px;">
<div class="tab-pane active" id="home">bmnmn,b,mbn...</div>
<div class="tab-pane" id="profile">.werewr..</div>
<div class="tab-pane" id="messages">.jkhk..</div>
<div class="tab-pane" id="settings">llkjlk...</div>
</div>
</div>
<hr>
</body>
</html>
http://jsfiddle.net/7r6kgooh/
I need to make menu in bootstrap with nav-pills. I have 5 sections in menu and each section have text (Like first is "aaaa", second is "bbbb", etc). If I click on first section it shows text "aaaa" and click on second section it shows text "bbbb", but if I click on third/fourth/ fifth section nothing happens.
Any ideas how to resolve this? Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>APK Market</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="navbar">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#games">Games</a></li>
<li><a data-toggle="tab" href="#apps">Apps</a></li>
<li><a data-toogle="tab" href="#live_wallpapers">Live Wallpapers</a></li>
<li><a data-toogle="tab" href="#themes">Themes</a></li>
<li><a data-toogle="tab" href="#archive">Archive</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div id="games" class="tab-pane active">aaaaaaaaaaaa</div>
<div id="apps" class="tab-pane">bbbbbbbbbbbbb</div>
<div id="live_wallpapers" class="tab-pane">ccccccccccc</div>
<div id="themes" class="tab-pane">ddddddddddd</div>
<div id="archive" class="tab-pane">eeeeeeeeee</div>
</div>
</div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="footer"></div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
You spelled "toggle" wrong.
<li><a data-toogle="tab" href="#live_wallpapers">Live Wallpapers</a></li>
<li><a data-toogle="tab" href="#themes">Themes</a></li>
<li><a data-toogle="tab" href="#archive">Archive</a></li>
change data-toogle to data-toggle..