I want to change the background color of this nav when active/clicked, how can I achieve this? using css
<div class="row container-fluid mainTabCon" style="width: 100%" style="">
<ul class="nav nav-pills" style="margin: 0 auto; ">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#"><strong>GENERALIDADES</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#"><strong>DESEMPEÑO</strong></a>
</li>
</ul>
</div>
help is appreciated
Add this script to the end of the body or your script file:
(taken from w3 schools and adjusted to you)
// Get the container element
var btnContainer = document.getElementById("myDiv");
// Get all buttons with class="btn" inside the container
var lis = btnContainer.getElementsByClassName("nav-link");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
Then just style the .active class:
.active {
background-color: blue;
}
Full page with code described:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<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">
<style type="text/css">
.active {
background-color: blue;
}
</style>
<body>
<div class="row container-fluid mainTabCon" id="myDiv" style="width: 100%" style="">
<ul class="nav nav-pills" style="margin: 0 auto; ">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#"><strong>GENERALIDADES</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#"><strong>DESEMPEÑO</strong></a>
</li>
</ul>
</div>
<script>
// Get the container element
var btnContainer = document.getElementById("myDiv");
// Get all buttons with class="btn" inside the container
var lis = btnContainer.getElementsByClassName("nav-link");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>
After some discussion with other users, are you referring to Bootstrap's js libraries? If not, add them to the end of the body and ignore the code above to see if it works.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
Related
I have an html file, which displays in Firefox as:
Problem is, I want to have everything in one single horizontal row next to each other:
the label Dropdown,
the dropdown box itself,
the bootstrap nav-pills menu and
the separate link.
My code is (jsfiddle: https://jsfiddle.net/aq9Laaew/162055/):
$(document).ready(function() {
let menus = ['Menu1', 'Menu2', 'Menu3'];
$('header ul').addClass("nav nav-pills");
for (let m of menus) {
$('header ul').append(`<li class="nav-item">
<a class="nav-link" data-value="${m}" data-toggle="pill" href="#">${m}</a>
</li>`);
}
$('header a').first().addClass('active');
$('header a').click(function() {
console.log($(this).data('value'));
});
});
<meta charset='utf-8' />
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<body>
<header>
<div class="form-group">
<label for="dd1">Dropdown:</label>
<select class="form-control" id="dd1">
<option>Value1</option>
<option>Value2</option>
</select>
</div>
<ul></ul>
Seperate Link
</header>
</body>
</html>
I tried
add css style="display:inline-block" to <div>, <ul> and <a> elements
use a bootstrap grid as described in https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp
But nothing worked so far.
Use class="row" to wrap div and wrap divs in col-*
Learn here:https://getbootstrap.com/docs/4.0/layout/grid/
$(document).ready( function(){
let menus = ['Menu1', 'Menu2', 'Menu3'];
$('header ul').addClass("nav nav-pills");
for (let m of menus) {
$('header ul').append(`<li class="nav-item">
<a class="nav-link" data-value="${m}" data-toggle="pill" href="#">${m}</a>
</li>`
);
}
$('header a').first().addClass('active');
$('header a').click(function(){
console.log($(this).data('value'));
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<header>
<div class="row">
<div class="form-group col-5">
<label for="dd1 col-form-label" >Dropdown:</label>
<select class="form-control d-inline-block col-8" id="dd1">
<option>Value1</option>
<option>Value2</option>
</select>
</div>
<div class="col-7 d-flex">
<div class="col-9 p-0">
<ul></ul>
</div>
<div class="col-3 pt-2">
Link
</div>
</div>
</div>
</header>
I have made a website using the newest version of bootstrap and started from the cover template. I changed the navbar to one from the documentation, causing the webpage to be too long for the screen. At the bottom of the screen there is a strip of a different colour which seems to be the part that is too long, looking like the screenshot belowHow do I remove this so that the screen doesn't scroll when there is not content there.
I am not looking for a solution for it to never scroll as there may sometimes be content that extends to there, but I would like it to have the lighter grey background
This is the full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Past Paper Website</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">
<!-- AJAX Code -->
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","Ajax_bootstrap_0.php?q="+str,true);
xmlhttp.send();
}
}
function runUser(str) {
if (str == "") {
document.getElementById("show").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("show").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","Ajax_bootstrap.php?second="+str,true);
xmlhttp.send();
}
}
</script>
<style type="text/css">
body { background: #404040 !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
<style type="text/css">
body {
overflow-x:hidden;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark #404040">
<a class="navbar-brand" href="#">Past Paper Website</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">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Areas to improve</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add Paper</a>
</li>
</ul>
</div>
</nav>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<!-- Dropdown -->
<form>
<div class="form-group row">
<div class="col-sm-2"></div>
<label for="chooseyear" class="col-sm-1 col-form-label">Subject</label>
<div class="col-sm-7">
<div class="col-sm-2"></div>
<select class="form-control" name="users" onchange="showUser(this.value)" id="chooseyear">
<option value="">Select a Subject:</option>
<?php
$extract="Done";
include("database_info.php");
$servername = servername;
$username = username;
$password = password;
$dbname = dbname;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("" . $conn->connect_error);
}
echo "";
$sql = "SELECT DISTINCT Subject FROM Papers";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<option value=".$row["Subject"].">".$row["Subject"]."</option>", "\n";
}
}
$conn->close();
?>
</div>
</select>
</form>
</div>
</div>
<br>
<!-- Table -->
<div id="txtHint"><b>Select a Subject</b></div>
</div>
<div class="mastfoot">
<div class="inner">
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
Codepen:https://codepen.io/anon/pen/ypPKOZ
Add position: fixed to site-wrapper element in your CSS.
Here is an updated Codepen for your review.
On my breadcrumbs in Bootstrap 4 after the first li I need to be able to remove forward slash
Change
Location: / Catalog
To
Location: Catalog
Question: How am I able to remove the first forward slash on bootstrap breadcrumbs
I tried
.breadcrumb-item:first-of-type::before {
display: inline-block;
padding-right: 0.5rem;
padding-left: 0.5rem;
color: #868e96;
content: "";
}
HTML
<div class="modal-header justify-content-center">
<ol class="breadcrumb">
<li class="breadcrumb-item">Location: </li>
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<li class="breadcrumb-item"><?php echo $breadcrumb['text']; ?></li>
<?php } ?>
</ol>
</div>
I believe what you're looking for is this.
Since Bootstrap adds the / before the elements starting on the second element, we have to select the second element by using the nth-child() CSS selector like so.
.breadcrumb .breadcrumb-item:nth-child(2)::before {
content: "";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="modal-header justify-content-center">
<ol class="breadcrumb">
<li class="breadcrumb-item">Location: </li>
<li class="breadcrumb-item">Content</li>
</ol>
</div>
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Use selector .breadcrumb-item:first-of-type+.breadcrumb-item::before to set content of :before pseudo-element as you wish:
.my-breadcrumb .breadcrumb-item:first-of-type+.breadcrumb-item::before {
content: "";
}
.dot-breadcrumb .breadcrumb-item:first-of-type+.breadcrumb-item::before {
content: "...";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Library</li>
<li class="breadcrumb-item active">Data</li>
</ol>
<ol class="breadcrumb my-breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Library</li>
<li class="breadcrumb-item active">Data</li>
</ol>
<ol class="breadcrumb dot-breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Library</li>
<li class="breadcrumb-item active">Data</li>
</ol>
The before selectors begin on the 2nd child. So you could so this:
.breadcrumb-item:nth-child(2):before {
content: '';
padding-right: 0;
}
I also overrode Bootstrap's padding-right to account for the new spacing between the list-items.
Use this selector,
.breadcrumb-item+.breadcrumb-item::before{
content: ">";
color: white;
}
My bootstrap carousel has 4 slides and all of them have animated charts but the animation is seen only in first slide.
How do I ensure that the chart animations for the rest of the 3 slides are also seen?
Code :
<%# Page Language="C#" AutoEventWireup="true" CodeFile="trycarousel.aspx.cs" Inherits="trycarousel" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css-sheets/bootstrap.css">
<script src="css-sheets/jquery.min.js"></script>
<script src="charts/ChartNew.js"></script>
<script src="css-sheets/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<canvas id="canvas_Pie1c" height="500" width="1000"></canvas>
</div>
<div class="item">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
<div class="item">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
<div class="item">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="color:white"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
var mydata2 = [
{
value: 0.39,
color: "#18a5a5 ",
title: "A"
},
{
value: 10.13,
color: "#3f51b5",
title: "B"
},
{
value: 44.29,
color: "#df982f",
title: "C"
},
{
value: 45.19,
color: "#668f4a",
title: "D"
}
];
var startWithDataset = 1;
var startWithData = 1;
var opt1c = {
animationStartWithDataset: startWithDataset,
animationStartWithData: startWithData,
animateRotate: true,
animateScale: false,
animationByData: "ByArc",
animationSteps: 50,
canvasBorders: false,
canvasBordersWidth: 3,
canvasBordersColor: "black",
legend: true,
inGraphDataShow: true,
animationEasing: "linear",
annotateDisplay: true,
spaceBetweenBar: 5,
graphTitleFontSize: 18
}
window.onload = function draw() {
var myPie = new Chart(document.getElementById("canvas_Pie1c").getContext("2d")).Pie(mydata2, opt1c);
var myPie = new Chart(document.getElementById("canvas_Pie2c").getContext("2d")).Pie(mydata2, opt1c);
}
</script>
</form>
</body>
</html>
I tried this :
http://wenda.baba.io/questions/4163645/bootstrap-carousel-start-css-animation-after-slide-is-complete.html
So,I modified my code to this.I am not sure whether that post addresses my question.I just want animation to be shown in each slide which is presently happening only for the first slide.
My modified code according to the above article is :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<link rel="stylesheet" href="css-sheets/bootstrap.css">
<script src="css-sheets/jquery.min.js"></script>
<script src="charts/ChartNew.js"></script>
<script src="css-sheets/bootstrap.min.js"></script>
<style>
body {padding-top:80px;}
.inactive{opacity:0;}
body {padding-top:80px;} .inactive{opacity:0;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container" style="max-width:900px;">
<div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li class="" data-target="#carousel-example-captions" data-slide-to="1"></li>
<li class="" data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<canvas id="canvas_Pie1c" height="500" width="1000"></canvas>
</div>
<div class="item " id="z1">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/bootstrap3/bootstrap-master/dist/js/bootstrap.js"></script>
<script>
function transitions() {
var j = 1;
for (var i = 1; i <= 4; i++) {
setTimeout(
function () {
if (!$.support.transition) { $('#z' + i).removeClass('inactive') }
else
{
$('#z' + j).addClass('animated').addClass('fadeInLeft');
$('#z' + j).one($.support.transition.end, function () { $('#z' + i).removeClass('inactive') }).emulateTransitionEnd(2000);
}
j++
},
2000 * (i - 1));
}
}
$('.carousel').carousel();
$(".carousel").on('slid.bs.carousel', function (evt) {
if ($(this).find('.active').index() == 1) {
$(this).carousel('pause');
/* run your transitions */
transitions();
var that = $(this);
/*restart your carousal */
setTimeout(function () {
that.carousel('next');
that.carousel('cycle');
/* hide transitions again */
$("#slide2 [id^='z']").removeClass().addClass('inactive');
}, 2000 * 5);
}
});
</script>
Still not working :/
I may be missing out something very simple/stupid. This is my first try at javascript.Please help.
You are creating the chart animation on window.onload.Copy the same to slid.bs.carousel event. Check the below snippet.
$(".carousel").on('slid.bs.carousel', function (evt) {
var myPie = new Chart(document.getElementById("canvas_Pie1c").getContext("2d")).Pie(mydata2, opt1c);
var myPie = new Chart(document.getElementById("canvas_Pie2c").getContext("2d")).Pie(mydata2, opt1c);
});
I have a view that contains a Twitter Bootstrap nav nav-pills control. This is embedded fine, and in each of my tabs I am planning to embed two partial views. Below is the razor view
#using SiteNET.Models;
#using Microsoft.AspNet.Identity;
#model SiteNET.Models.ManageUserViewModel
#{
ViewBag.Title = "Manage Account";
}
<style type="text/css">
.manage {
margin: 20px;
}
</style>
<div class="manage">
<ul class="nav nav-pills" id="myTab">
<li><a data-toggle="tab" href="#manage">Manage Account</a></li>
<li><a data-toggle="tab" href="#downloads">Avalible Downloads</a></li>
</ul>
<div class="tab-content">
<div id="manage" class="tab-pane active fade in">
<h2>#ViewBag.Title</h2>
<p class="text-success">#ViewBag.StatusMessage</p>
#*<div class="alert alert-success"
data-toggle="collapse"
role="alert">#ViewBag.StatusMessage</div>*#
<div class="row">
<div class="col-md-12">
#Html.Partial("_ChangeEmailAddressPartial", Model)
</div>
</div>
<div class="row">
<div class="col-md-12">
#if (ViewBag.HasLocalPassword)
{
#Html.Partial("_ChangePasswordPartial")
}
else
{
#Html.Partial("_SetPasswordPartial")
}
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
</div>
<div id="downloads" class="tab-pane fade">
<h3>Downloads</h3>
<p>Avalible downloads partial view.</p>
</div>
</div>
</div>
The problem is that when the page loads the content of the first tab is shown but the actual tab is not selected (see below)
it should look like this when the page is first loaded
I have tried to use this solution, which uses the JavaScript below
<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
// Store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
// On load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');
</script>
But this does not seem to work (that is, does not seem to select the first tab when the page is loaded). It also does not store the selected tab. How can I
Make the first tab show as selected when the page is first loaded?
How can I amend the JS above so that the selected tab is persisted between page navigations?
Thanks for your time.
To see this problem for your self go to CodeLAB and paste in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Pills Nav with Icons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<script>
//$('#myTab a[href="manage"]').tab('show');
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
// Store the currently selected tab in the hash value
$("ul#myTab > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
//$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
// var id = $(e.target).attr("href").substr(1);
// window.location.hash = id;
//});
// On load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="#' + hash + '"]').tab('show');
</script>
<div class="manage">
<ul class="nav nav-pills" id="myTab">
<li><a data-toggle="tab" href="#manage">Manage Account</a></li>
<li><a data-toggle="tab" href="#downloads">Avalible Downloads</a></li>
</ul>
<div class="tab-content">
<div id="manage" class="tab-pane active fade in">
<h2>Manage</h2>
<p class="text-success">Success</p>
<div class="row">
<div class="col-md-12">
<p>Partial view A</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Partial view B</p>
</div>
</div>
</div>
<div id="downloads" class="tab-pane fade">
<h3>Downloads</h3>
<p>Avalible downloads partial view.</p>
</div>
</div>
</div>
</body>
</html>
Then click "Show Output", you will see the problem.
I have no experience with asp and whatsoever, but for the bootstrap / jQuery part I guess your solution is this:
1.) Give the li you want to be active the class .active. For example:
<li class="active"><a data-toggle="tab" href="#manage">Manage Account</a></li>
The same goes than for the according content element, like you already did.
<div id="manage" class="tab-pane active fade in">xxx</div>
Take a closer look to the according bootstrap documentation: Bootstrap Tabs
2.) I guess it's not working because your script targets the wrong element (ul.nav-tabs), which doesn't exist in your code. As far as I can see it from your code, you have .nav-pills instead. So try:
$("ul.nav-pills > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
Or even better, try targeting your unique id #myTab, like this:
$("ul#myTab > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
If this doesn't help or hint you in the right direction, please try to create a working fiddle of your generated html output so that we can take a closer look at your code.
UPDATE
Try this code. It works perfectly for me on my localhost.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Pills Nav with Icons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
if(location.hash) {
$('a[href=' + location.hash + ']').tab('show');
}
$(document.body).on("click", "a[data-toggle]", function(event) {
location.hash = this.getAttribute("href");
});
});
$(window).on('popstate', function() {
var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
$('a[href=' + anchor + ']').tab('show');
});
</script>
<div class="manage">
<ul class="nav nav-pills" id="myTab">
<li class="active"><a data-toggle="tab" href="#manage">Manage Account</a></li>
<li><a data-toggle="tab" href="#downloads">Avalible Downloads</a></li>
</ul>
<div class="tab-content">
<div id="manage" class="tab-pane active fade in">
<h2>Manage</h2>
<p class="text-success">Success</p>
<div class="row">
<div class="col-md-12">
<p>Partial view A</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Partial view B</p>
</div>
</div>
</div>
<div id="downloads" class="tab-pane fade">
<h3>Downloads</h3>
<p>Avalible downloads partial view.</p>
</div>
</div>
</div>