I am using bootstrap(version:3.3.7) to achieve a simple navigation.
This is my code:
<head>
<meta charset="UTF-8">
<script src="lib/bower_components/jquery/dist/jquery.js"></script>
<script src="lib/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="lib/bower_components/bootstrap/dist/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#SNP">SNP</a> </li>
<li><a data-toggle="tab" href="#SSR">SSR</a> </li>
</ul>
<div class="tab-content">
<div id="SNP" class="tab-pane fade in active">
Something about SNP.
</div>
<div id="SSR" class="tab-pane fade">
Something about SSR.
</div>
</div>
</div>
</body>
</html>
When i first come to this page, Chrome (version: 57.0.2987.110) shows that The URL is www.foofoo.org/page1. It becomes www.foofoo.org/page1#SNP or www.foofoo.org/page1#SSR while i click the links include in the ul a tag. How to make url to be www.foofoo.org/page1 no matter which link I click (In other words, The URL is always www.foofoo.org/page1).
You will be able to get the same effect by using the data-target attribute instead of href in your anchor tags:
<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" data-target="#SNP">SNP</a> </li>
<li><a data-toggle="tab" data-target="#SSR">SSR</a> </li>
</ul>
<div class="tab-content">
<div id="SNP" class="tab-pane fade in active">
Something about SNP.
</div>
<div id="SSR" class="tab-pane fade">
Something about SSR.
</div>
</div>
This means you won't get a URL change in your address bar. However, I would recommend leaving href="#" in otherwise your anchor tag will behave strangely.
Related
I am a beginner in web development. I am working on a small project which needs to open a url(something like http://192.168.1.107:8080) content on click of a tab, in the same tab pane. The mentioned url is a client, which displays some runtime data(eg: temperature) continuously.
I could find some code snippets on creating tabs, but I'm keen to get this specific requirement working.
I would appreciate any code snippets, links or information on displaying a url data in same tab pane please.
sorry for vague question, but this is how I could put it in the words.
This is the sample code I have:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="temp1-tab" data-toggle="tab" href="#temp1" role="tab" aria-controls="temp1" aria-selected="true">Temperature 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="temp2-tab" data-toggle="tab" href="#temp2" role="tab" aria-controls="temp2" aria-selected="false">Temperature 2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="temp3-tab" data-toggle="tab" href="#temp3" role="tab" aria-controls="temp3" aria-selected="false">Temperature 3</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="temp1" role="tabpanel" aria-labelledby="temp1-tab">
Display temp1 <br />
<iframe src="http://192.168.1.107:5000/" title="Temp 2"></iframe>
</div>
<div class="tab-pane fade" id="temp2" role="tabpanel" aria-labelledby="temp2-tab">
Display Temp2
</div>
<div class="tab-pane fade" id="temp3" role="tabpanel" aria-labelledby="temp3-tab">
Display Temp3
</div>
</div>
<script>
$('.tab-link').on('click', function(event) {
// Prevent url change
event.preventDefault();
// `this` is the clicked <a> tag
$('[data-toggle="tab"][href="' + this.hash + '"]').trigger('click');
})
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
thanks
If you are trying to open a URLinside your website, you can use an iframe to do so. Sample example:
<iframe src="http://192.168.1.107:8080/" title="Tab 2"></iframe>
Good day guys, I need help,
When a link is clicked on another page I need the tab to be displayed after the page loads, I've seen this being done using the hash #id but is there any possible way to do this with the data-filter as they're the ones controlling the tabs?
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-pills" id="filters">
<li class="active">All</li>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
</div>
</div>
You could pass special request parameter in query string. Then get the parameter value and activate corresponding tab.
For example, add tab-name into query string of target URL (the full relative URL is /my-page?tab-name=profile). Following expression returns value of the parameter, that equals to 'profile':
var tabName = (window.location.href.match(/[?&]tab-name=[^&$]+/i) || '=').split('=')[1];
If tab-name is omitted the expression returns empty string.
Then select navigation tab by received value and activate its associated pane using show method.
var tabName = (window.location.href.match(/[?&]tab-name=[^&$]+/i) || '=').split('=')[1];
tabName='profile'; // remove this line on real page
if(tabName.length)
$('#myTabs .nav-link[href="#' + tabName + '"]').tab('show');
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<ul class="nav nav-pills" id="myTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
Note, in the snippet I set value of tabName directly, because it is not possible to send custom request to the snippet. So, you have to remove tabName='profile'; on your real page.
On initial page load, the tabs show but the content for that selected tab does not.
If I click the "Link" tab and back to the "Post" tab then it shows up.
<div class="container">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="tabs">
<li class="nav-item">
<a class="active nav-link" href="#post" data-toggle="tab">Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link" data-toggle="tab">Link</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane" id="post">post</div>
<div class="tab-pane" id="link">link</div>
</div>
</div>
</div>
</div>
On page load it looks like this (the div with the tab-pane class hasn't been displayed):
There are no errors in my console and the bootstrap JS file is loaded. There are some similar questions around but the solutions have not worked for me.
What do I need to add to get the tab pane to display when the page loads?
Check this out
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="tabs">
<li class="nav-item">
<a class="active nav-link active" href="#post" data-toggle="tab">Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link" data-toggle="tab">Link</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="post">post</div>
<div class="tab-pane" id="link">link</div>
</div>
</div>
</div>
</div>
The root cause of your problem was the fade class. Well done ! Removing it is the solution.
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>
I am trying to create customized, togglable tabs in wordpress, but I am stuck. I would like to change the title part of the tabs to images. Something like that, but in wordpress:
http://jsfiddle.net/iamraviteja/ttpxoxob/1/
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a>
</li>
<li>
<a data-toggle="tab" href="#menu1">
<img src="http://www.downloadsbyvita.com/images/video.jpg" />
</a>
</li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Either you can use bootstrap or inbuilt jquery ui. Or Tabs Shorcode plugin