How do i Display new HTML page in Navigation tab? - javascript

I am trying to create a web page where there is a navigation bar containing three tabs. Each navigation tab contains a web page. I can't seem to display the website when the user clicks the tab. Can someone help me display the various web pages when a user clicks the different tab buttons? Note i am using bootstrap.
<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">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/shop-item.css" rel="stylesheet">
<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>
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('#home').load('home.html');
$('#data').load('data/data.html');
$('#sauce').load('sauce/sauces.html');
</script>
</head>
<body>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Home</a></li>
<li><a data-toggle="tab" href="#data"> Data </a></li>
<li><a data-toggle="tab" href="#sauce"> Sauce </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>
</body>
</html>


updated code as per your requirement.
//onloading
$("#myTab a").each(function () {
var target = $(this).attr("href");
$(target).load($(this).attr("data-page"))
});
//This is for tab click to load page
/*
$("#myTab a").click(function () {
debugger
var target = $(this).attr("href");
alert($(this).attr("data-page"))
$(target).load($(this).attr("data-page"))
});
*/
<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" data-page="home.html"> Home</a></li>
<li><a data-toggle="tab" href="#data" data-page="data.html"> Data </a></li>
<li><a data-toggle="tab" href="#sauce" data-page="sauce/sauces.html"> Sauce </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active"></div>
<div id="data" class="tab-pane fade in"></div>
<div id="sauce" class="tab-pane fade in"></div>
</div>

Related

Use grid inside collapse body

In the below snippet I have a collapse which shows if you hover over the second nav-link item. Now I want to use the Grid system inside this collapse but I can't seem to make it work.
What does not work?
The columns just display underneath one another.
How do I use the grid system inside the collapse body?
$(".menu1").hover(
function() {
$('.panel').collapse('show');
}, function() {
$('.panel').collapse('hide');
}
);
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link menu1" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div class="panel collapse" id="collapseExample">
<div class="card card-body">
<div class="row">
<div class="col-md-6">Test - Column</div>
<div class="col-md-6">Test - Column</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Is this what you want to do?
This is in Bootstrap 3
All I did was wrap your row in a container
Fiddle

How do I activate a dynamic tab from another page in bootstrap?

I'm developing a web page which has dynamic tabs from Bootstrap. I'm having problem in linking a tab's content from an external page.
I want to activate the menu 1 and menu 2 tab of the page below from an external link of another page.Tried using href="index.html#menu1" but it doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/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">
<div class="row">
<div class="col-sm-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
</div>
<div class="col-sm-9">
<div class="tab-content">
<div id="menu1" class="tab-pane fade in active">
<h3>Menu 1</h3>
<p>Menu 1 activated.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Menu 2 Activated </p>
</div>
</div>
</div>
</div>
</body>
</html>

thanks to this answer about query string and this answer about to show Bootstrap's tab, add the following script to your page and generate links on the other pages by using query string!
function getQuery(url) {
var query = {},
href = url || window.location.href;
href.replace(/[?&](.+?)=([^&#]*)/g, function (_, key, value) {
query[key] = decodeURI(value).replace(/\+/g, ' ');
});
return query;
}
function getParam(name){
var obj = getQuery();
return obj[name];
}
$(document).ready(function() {
var target = getParam('target');
$('.nav a[href="#'+target+'"]').tab('show');
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/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">
<div class="row">
<div class="col-sm-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
</div>
<div class="col-sm-9">
<div class="tab-content">
<div id="menu1" class="tab-pane fade in active">
<h3>Menu 1</h3>
<p>Menu 1 activated.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Menu 2 Activated </p>
</div>
</div>
</div>
<div class="row">
use the following script and
the link on the other pages should be like this: url?target=menu2
without "#"
</div>
</div>
</body>
</html>

Why is the active tab not changing on my page?

when I click on a tab the /#name changes. However, the highlighted tab indicating that it is the active tab does not change. The content also does not change and the content associated with the default tab continues to be displayed.
doctype html
html
head
title Bootstrap Tab this Database
script(src="/socket.io/socket.io.js")
script(src="client.js")
link(rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css")
body
div.container
nav.navbar.navbar-default.navbar-inverse
div.container-fluid
div.navbar-header
button(type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false")
span.sr-only
<!-- Draw two bars in navbar button when the window is small -->
span.icon-bar
span.icon-bar
ul.nav.navbar-nav
<!-- Setup the default active tab -->
li.active
a(href="#db1Tab", data-toggle="tab") DB1
<!-- The tabs on standby -->
li
a(href="#db2Tab", data-toggle="tab") DB2
div.tab-content
div(id="db1Tab").tab-pane.fade.in.active
include db1
div(id="db2Tab").tab-pane.fade
include db2

This example can help you (try it yourself here):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/3.1.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">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
</div>
</div>
</div>
</body>
</html>

Bootstrap .tab('show') not working for my code

Here is my Code on JSFiddle
$('button').click(function() {
$('#passive_order_categories').tab('show');
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<button>Click</button>
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#active_order_categories" aria-expanded="true">Active</a>
</li>
<li class=""><a data-toggle="tab" href="#passive_order_categories" aria-expanded="false">Passive</a>
</li>
</ul>
<div class="tab-content">
<div id="active_order_categories" class="tab-pane active">
<div class="panel-body"></div>
</div>
<div id="passive_order_categories" class="tab-pane">
<div class="panel-body"></div>
</div>
</div>
</div>
Can't figure out why is Bootstrap .tab('show') not working for my code.

From Bootstrap#tabs, what the target to trigger is the tab that we clicked to show the contents, not the content itself.
You should give the second tab that links to the passive_order_categories an id, or use ul.nav-tabs li:eq(1)
to get the second li in the list.
Or use a[href="#passive_order_categories"] to get the anchor related to that content page.
Then apply the .tab('show') on it, not on $('#passive_order_categories')
$('button').click(function() {
// Find the target tab li (or anchor) that links to the content you want to show.
$('a[href="#passive_order_categories"]').tab('show');
//$('ul.nav-tabs li:eq(1)').tab('show');
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<button>Click</button>
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#active_order_categories" aria-expanded="true">Active</a>
</li>
<li class=""><a data-toggle="tab" href="#passive_order_categories" aria-expanded="false">Passive</a>
</li>
</ul>
<div class="tab-content">
<div id="active_order_categories" class="tab-pane active">
<div class="panel-body"></div>
</div>
<div id="passive_order_categories" class="tab-pane">
<div class="panel-body"></div>
</div>
</div>
</div>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<button>Click</button>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
<script>
$('button').click(function() {
// Find the target tab li (or anchor) that links to the content you want to show.
$('a[href="#nav-contact"]').tab('show');
//$('ul.nav-tabs li:eq(1)').tab('show');
});
</script>
</body>
</html>
With my respect to accepted answer (vote for him), here is bootstrap4 working sample.

Bootstrap dropdown doesn't work?

Bootstrap dropdown isn't working for me. I did everything correctly as you can see it there:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test site | Jony</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Testing website coded by Jony - rapture-gfx" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'><link rel="stylesheet" href="css/flexslider.css" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="js/jquery.flexslider.js"></script><!-- Place in the <head>, after the three links --> <script type="text/javascript" charset="utf-8">$(window).load(function() { $('.flexslider').flexslider({ animation: "slide" });});</script>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp-1.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.dropdown-toggle').dropdown()
</script>
</head>
<header>
<div class="header">
<div class="container">
<ul class="menu">
<li class="current"><span style="color: #bde2e1;">Home</li>
<li class="dropdown"><a class="dropdown-toggle" href="#">Servers</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
</li>
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
Bootstrap is a ready framework with features like grid system, rows, ready js menus and more.
There's an explanation of how it works:
http://twitter.github.com/bootstrap/javascript.html#dropdowns
It doesn't work for me.
Yes, my src links correctly to the JS files.

your missing the body in your html.
put your script at the bottom of the page or after ready:
<script type="text/javascript">
$(function(){
$('.dropdown-toggle').dropdown();
});
</script>
demo: http://jsfiddle.net/rLL75/
EDIT:
use a newer version of jquery.

<header>
<div class="navbar navbar-static header">
<div class="navbar-inner container">
<ul class="nav" role="navigation">
<li class="brand"><span style="color: #bde2e1;">Home</span></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
<div id="logo"><img src="img/logo.png" /></div>
</div>
</div>
</header>
<script type="text/javascript">
$(function(){
$('.dropdown-toggle').dropdown();
});
</script>

Categories