We Keep Coding

How do I save active tab after page refresh javascript

I am trying to save to active tab state on page refresh. Currently, I have the following code, however, when I output to console the ui-state-active it gives me back -1 as the value. And it doesn't seem to even register my click() function, cause my console.log in the function never outputs. I believe I am doing something wrong here.
<script language="javascript" type="text/javascript">
$(".tabs").tabs();
var tabIndex = parseInt(localStorage.getItem('activeTab')) + 1;
console.log("local storage value parseInt: " + tabIndex);
if(tabIndex != null){
console.log("I am in the if statement: " + localStorage.getItem('activeTab'));
$('.tabs > ul > li:nth-child('+ (tabIndex) +')').find('a').click();
}
$(document).on("click", ".tab-links a", function(e) {
$('.active').removeClass('active');
$(this).parent().addClass('active');
var curTab = $('.tab-links').find('.active')[0].id;
console.log("This is the currentTab value: " + curTab.replace ( /[^\d.]/g, '' ));
var curTabIndex = (curTab.replace ( /[^\d.]/g, '' ) - 1);
localStorage.setItem('activeTab', curTabIndex);
});
</script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active" >
<?php include("tab_1.html"); ?>
</div>
<div id="tab2" class="tab" >
<?php include("tab_2.html"); ?>
</div>
<div id="tab3" class="tab" >
<?php include("tab_3.html"); ?>
</div>
<div id="tab4" class="tab active">
<?php include("tab_4.html"); ?>
</div>
<div id="tab5" class="tab active">
<?php include("tab_5.html"); ?>
</div>
<div id="tab6" class="tab active">
<?php include("tab_6.html") ?>
</div>
</div>
</div>

What I would recommend doing is inside your click handler, removing the 'active' class to begin with, then affixing it to the clicked element:
$('.tab-links a').click(function(e) {
$('.active').removeClass('active');
$(this).parent().addClass('active');
var curTab = $(this).parent()[0].id; // Or $('.tab-links').find('.active')[0].id;
console.log("This is the currentTab value: " + curTab);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active"></div>
<div id="tab2" class="tab"></div>
<div id="tab3" class="tab"></div>
<div id="tab4" class="tab"></div>
<div id="tab5" class="tab"></div>
<div id="tab6" class="tab"></div>
</div>
</div>
Note that you should only ever have one 'active' class at any one time.
Also be aware that if you are adding your elements dynamically, you will need to hoist the scope and utilise event delegation. In this case, replace $('.tab-links a').click(function(e) {}) with $(document).on("click", ".tab-links a", function(e) {}):
$(document).on("click", ".tab-links a", function(e) {
$('.active').removeClass('active');
$(this).parent().addClass('active');
var curTab = $(this).parent()[0].id; // Or $('.tab-links').find('.active')[0].id;
console.log("This is the currentTab value: " + curTab);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active"></div>
<div id="tab2" class="tab"></div>
<div id="tab3" class="tab"></div>
<div id="tab4" class="tab"></div>
<div id="tab5" class="tab"></div>
<div id="tab6" class="tab"></div>
</div>
</div>
Hope this helps! :)

Here you go with a solution https://jsfiddle.net/dhynozb5/2/
$("#tabs").tabs();
var currentTab = $('.ui-state-active a').index();
if(localStorage.getItem('activeTab') != null){
$('#tabs > ul > li:nth-child('+ (parseInt(localStorage.getItem('activeTab')) + 1) +')').find('a').click();
}
$('#tabs > ul > li > a').click(function(e) {
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
localStorage.setItem('activeTab', curTabIndex);
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active" >
tab_1.html
</div>
<div id="tab2" class="tab" >
tab_2.html
</div>
<div id="tab3" class="tab" >
tab_3.html
</div>
<div id="tab4" class="tab active">
tab_4.html
</div>
<div id="tab5" class="tab active">
tab_5.html
</div>
<div id="tab6" class="tab active">
tab_6.html
</div>
</div>
</div>
Highlighting an active tab after page refresh I've used localStorage.
Hope this will help you.

Either move your entire <script></script> block below the html or do the following:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".tabs").tabs();
var currentTab = $('.ui-state-active a').index();
console.log("hi");
console.log("this is the currentTab value: " + currentTab);
$('.tablinks a').click(function(e) {
console.log("i am in here");
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
console.log(curTabIndex);
});
});
</script>

Bootstrap Modal - window darkens but no modal

I have a mustache.js template that contains an <a> which targets myModal like so:
<script id="profile-preview-template" type="text/template">
<div class="col-sm-3">
<a style="display:block" data-toggle="modal" data-target="#myModal">
<div class="profile-preview">
<img class="img-responsive img-circle center-block" width="200px" src="{{img_url}}" alt="Photo of {{first_name}} {{last_name}}" />
<h1>{{first_name}} {{last_name}}</h1>
<h2 class="text-muted">{{major}}</h2>
<h3 class="text-muted">Cohort {{cohort}}</h3>
</div>
</a>
</div>
</script>
Here is the modal:
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close glyphicon glyphicon-remove" data-dismiss="modal"></button>
<h3 class="modal-title">BluLocker</h3>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-2 col-sm-offset-2 col-xs-offset-1">
<img src="img/portfolio/blulocker1.jpg" alt="BluLocker" class="img-responsive">
</div>
</div>
</div>
<p>...</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
When the result is clicked it darkens the screen but no modal is displayed. I am led to believe that the modal is conflicting with something in the javascript because i cannot get a modal to work anywhere on the site directory.
here are my links to javascript:
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Mousctache.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js"></script>
<!-- Custom JavaScript -->
<script src="js/custom.js"></script>
I also have a few inline script tags running JS
I need to get the modal to display upon clicking the <a> in the moustache.js template.
FYI here is the full HTML page starting at the <body> tag:
<body>
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close glyphicon glyphicon-remove" data-dismiss="modal"></button>
<h3 class="modal-title">BluLocker</h3>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-2 col-sm-offset-2 col-xs-offset-1">
<img src="img/portfolio/blulocker1.jpg" alt="BluLocker" class="img-responsive">
</div>
</div>
</div>
<p>...</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/EPG.jpg"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
APPLY
</li>
<li class="dropdown">
RESOURCES <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Calander
</li>
<li>
People
</li>
<li>
ETC
</li>
<li>
ETC
</li>
<li>
ETC
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<header class="intro-header" style="background-image: url('img/slidedeck/ex1.jpg')">
<div style="background: rgba(0,0,0, 0.5);">
<div class="container">
<div class="row">
<div class="site-heading">
<h1>NETWORK</h1>
<hr class="small">
<h2 class="subheading">The most valuable part of EPG is the people.</h2>
</div>
</div>
</div>
</div>
</header>
<div class="search-navbar">
<input type="search" name="search" id="search" placeholder=""/>
</div>
<div class="container">
<div id="profile-results" class="row">
</div>
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="list-inline text-center">
<li>
<a href="" target="_blank">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a>
</li>
<li>
<a href="" target="_blank">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
</a>
</li>
<li>
<a href="">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright © Entrepreneurship for the Public Good 2015</p>
</div>
</div>
</div>
</footer>
</div>
Then I have a bunch of inline JavaScript and the closing </body>:
<script id="profile-preview-template" type="text/template">
<div class="col-sm-3">
<a style="display:block" data-toggle="modal" data-target="#myModal">
<div class="profile-preview">
<img class="img-responsive img-circle center-block" width="200px" src="{{img_url}}" alt="Photo of {{first_name}} {{last_name}}" />
<h1>{{first_name}} {{last_name}}</h1>
<h2 class="text-muted">{{major}}</h2>
<h3 class="text-muted">Cohort {{cohort}}</h3>
</div>
</a>
</div>
</script>
<script id="modal-template" type="text/template">
<div id="myModal">
<div class="contianer">
<div class="row">
<div class="col-sm-6">
<img width="300px" src="{{img_url}}" alt="Profile of {{first_name}} {{last_name}}" class=" img-circle img-responsive">
</div>
<div class="col-sm-6">
<h1>{{first_name}} {{last_name}}</h1>
<h2>{{major}}</h2>
<h3>{{cohort}}</h3>
<h4>{{home_town}}</h4>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-6">
<h1>About {{first_name}}</h1>
</div>
<div class="col-xs-6">
<h3>Status:{{status}}</h3>
</div>
</div>
<div class = "row">
<p>{{bio}}</p>
</div>
</div>
LinkedIn →
</div>
</script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Mousctache.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js"></script>
<!-- Custom JavaScript -->
<script src="js/custom.js"></script>
<script type="text/javascript">
$('#search').keyup(function() {
var searchField = $('#search').val();
var myExp = new RegExp(searchField, "i");
$.getJSON('/profiles.json', function(data){
var result =""
$.each(data.profiles, function(key, val){
var fullName = val.first_name + " " + val.last_name
var cohortNum = val.cohort.toString()
var cohortName = "cohort " + cohortNum
if ((val.first_name.search(myExp) != -1) ||
(val.last_name.search(myExp) != -1) ||
(val.major.search(myExp) != -1) ||
(fullName.search(myExp) != -1)||
(cohortNum.search(myExp) != -1)||
(cohortName.search(myExp) != -1)
){
var template = $('#profile-preview-template').html();
result += Mustache.render(template, val);
}
});
$('#profile-results').html(result);
});
});
</script>
</body>
And also FYI here is the custom.js file:
$(function(){
//Variables
var slideqty = $('#featured .item').length; //get the number of slides in the carousel deck
var wheight = $(window).height(); //get the height of the window
var randSlide = Math.floor(Math.random()*slideqty); //pick a random number from 0-slideqty
//makeIndicators
//Automatically make indicators on the carousel for each slide in the deck
for (var i=0; i < slideqty; i++) {
var insertText = '<li data-target="#featured" data-slide-to="' + i + '"';
if (i === 0) {
insertText += ' class="active" ';
}
insertText += '></li>';
$('#featured ol').append(insertText);
}
$('.carousel').carousel({
pause: false
}); // end of makeIndicator
//fullHeight
// set all elements with class "fullheight" to a height equal to height of viewport on load
$('.fullheight').css('height', wheight);
//resize the "fullheight" elements on screen resize
$(window).resize(function() {
wheight = $(window).height(); //get the height of the window
$('.fullheight').css('height', wheight); //set to window tallness
});
//adjust the interval of the carousel
$('.carousel').carousel({
interval: 10000 //changes the speed in miliseconds
})
//make images darker
$('.item img').each(function() {
$(this).wrap('<div class="tint"></div>'); //wraps the carousel images with a div of class "tint"
});
//animate the contents of the search bar
var txt = "Search by name, major, or cohort.";
var timeOut;
var txtLen = txt.length;
var char = 0;
$('#search').attr('placeholder', '|');
(function typeIt() {
var humanize = Math.round(Math.random() * (200 - 30)) + 30;
timeOut = setTimeout(function () {
char++;
var type = txt.substring(0, char);
$('#search').attr('placeholder', type + '|');
typeIt();
if (char == txtLen) {
$('#search').attr('placeholder', $('#search').attr('placeholder').slice(0, -1)) // remove the '|'
clearTimeout(timeOut);
}
}, humanize);
}()
);
//shuffle takes an array and shuffles it
function shuffle(o){ //v1.0
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
//load 20 random profiles
function loadRand(){
$.getJSON('/profiles.json', function(data){
rand = ""
randProfiles = shuffle(data.profiles);
for (var i = 0; i < 20; i++) {
var template = $('#profile-preview-template').html();
rand += Mustache.render(template, randProfiles[i]);
}
$('#profile-results').html(rand);
});
};
loadRand(); //load random profiles on refresh
//if search is empty load 20 random profiles
$('#search').keyup(function() {
var searchField = $('#search').val();
if (searchField == ''){
loadRand();
}
});
}); //end of main function

Change id of your div from item1 to "myModal" as you are using data-target="#myModal" in your code.

jQuery: Hide parent of object with same text as selector on click

I have a menu where I want (because of specific dynamic content I can't use classes or ID's) to hide all items that hasn't the same text as the menu-selector.
HTML:
<ul>
<li class="dropDown">
<li class="galSub">Alla</li>
<li class="galSub">NorrlandsOperan</li>
<li class="galSub">Norrdans</li>
<li class="galSub">Estrad Norr</li>
<li class="galSub">Piteå Kammaropera </li>
</ul>
<div class="box boxImg col2">
<h3>Figaro</h3>
<h4 class="prodEns">NorrlandsOperan</h4>
</div>
<div class="box boxImg col2 ">
<h3>A la Carte</h3>
<h4 class="prodEns">Norrdans</h4>
</div>
<div class="box boxImg col2">
<h3>Porta</h3>
<h4 class="prodEns">Estrad Norr</h4>
</div>
<div class="box boxImg col2">
<h3>A la Carte</h3>
<h4 class="prodEns">Piteå Kammaropera</h4>
</div>
JQuery:
var galLi = $('.galSub a');
var prodItm = $('.boxImg');
var prodEns = $('.prodEns');
galLi.click(function(e){
var refLink = $(this);
e.preventDefault();
if (prodEns.text() == refLink.text()) {
$('this').parent().siblings(prodItm).hide();
}

I'll opt for .filter() over :contains as it can return partial matches
var galLi = $('.galSub');
var boxImgs = $('.boxImg');
galLi.click(function(e){
var text = $(this).text().trim();
e.preventDefault();
boxImgs.filter(function(){
return $(this).find('.prodEns').text().trim() == text;
}).toggle();//use toggle if you want to hide and show, else just use hide()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="dropDown">
<li class="galSub">Alla</li>
<li class="galSub">NorrlandsOperan</li>
<li class="galSub">Norrdans</li>
<li class="galSub">Estrad Norr</li>
<li class="galSub">Piteå Kammaropera </li>
</ul>
<div class="box boxImg col2">
<h3>Figaro</h3>
<h4 class="prodEns">NorrlandsOperan</h4>
</div>
<div class="box boxImg col2 ">
<h3>A la Carte</h3>
<h4 class="prodEns">Norrdans</h4>
</div>
<div class="box boxImg col2">
<h3>Porta</h3>
<h4 class="prodEns">Estrad Norr</h4>
</div>
<div class="box boxImg col2">
<h3>A la Carte</h3>
<h4 class="prodEns">Piteå Kammaropera</h4>
</div>

Try this out http://jsfiddle.net/b2d8ncny/1/
var galLi = $('.galSub a');
var prodItm = $('.boxImg');
var prodEns = $('.prodEns');
galLi.click(function(e){
var refLink = $(this);
e.preventDefault();
prodItm.hide();
prodEns.each(function(i,val){
if ($(val).text().trim() == refLink.text().trim()) {
$(val).closest(".boxImg").show();
}
})
})

How about
$('.prodEns:not(:contains('+refLink.text()+'))').each(function(){
$(this).parent().siblings(prodItm).hide();
});

Remove div if list has less than three elements

How can I remove div.count if the ul.elements has less than three li?
The html:
<ul class="list">
<li class="element level-1">
<div class="top">
<div class="content">dsssd</div>
<div class="count"></div>
<ul class="elements">
<li class="element level-2">
<div class="parent">
<div class="content">assd</div>
<ul class="elements">
<li class="element level-3">
<div id="dssd">
<div class="content">dssd</div>
</div>
</li>
<li class="element level-3">
<div id="fddd">
<div class="content">gfddg</div>
</div>
</li>
<li class="element level-3">
<div id="fdff">
<div class="content">ddee</div>
</div>
</li>
<li class="element level-3">
<div id="gfgggf">
<div class="content">hghg</div>
</div>
</li>
</ul>
</div>
</li>
<li class="element level-2">
<div id="gfgf" class="parent">
<div class="content">eeer</div>
</div>
</li>
</ul>
</div>
</li>
<li class="element level-1">
<div id="hjjh" class="top">
<div class="content">hjhj</div>
<div class="count"></div>
<ul class="elements">
<li class="element level-2">
<div id="yuyuu" class="parent">
<div class="content">uyyu</div>
<ul class="elements">
<li class="element level-3">
<div id="trtrrt">
<div class="content">trtrtr</div>
</div>
</li>
</ul>
</div>
</li>
<li class="element level-2">
<div id="opop" class="parent">
<div class="content">opop</div>
</div>
</li>
<li class="element level-2">
<div id="kjkj" class="parent">
<div class="content">kjkj</div>
</div>
</li>
</ul>
</div>
</li>
<li class="element level-1">
<div id="qwwq" class="top">
<div class="content">qwqw</div>
<div class="count"></div>
<ul class="elements">
<li class="element level-2">
<div id="ytty" class="parent">
<div class="content">tyty</div>
<ul class="elements">
<li class="element level-3">
<div id="ghghgh">
<div class="content">jhhj</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
the script:
$('.list .count').text(function() {
var length = $(this).closest('.count')
.next('.elements')
.find('.element')
.length
;
if (length > 2) {
return length;
}
});
css:
.elements {
clear: both;
}
.level-1 {
margin-bottom: 10px;
}
.count {
background-color: pink; float: left; padding: 5px;
}
fiddle

$('div.count').find('ul.elements').filter(function() {
return $(this).children('li').length < 3;
})
.end().remove();
EDIT
The following should work with the updated markup:
$('div.count').each(function() {
var that = $(this),
upUL = that.next('ul.elements');
upUL.add( upUL.find('ul.elements') ).filter(function() {
return $(this).children('li').length < 3;
}).length === 0 || that.remove();
});
JS FIDDLE DEMO

Just add $(this).remove() to remove div in else part in your exisiting text() function like this:
if (length > 2) {
return length;
}
else {
$(this).remove(); // less than 3 remove it
}
UPDATED FIDDLE
or add another if:
if (length < 3) {
$(this).remove();
}

Alternative to selected answer: rather than removing the "count" entirely (in case you are live-updating the contents of those lists with JavaScript later,) why not just hide it? Then you can display it again if the length situation changes.
This seemed to work:
$('.list .count').text(function() {
var length = $(this)
.closest('.count')
.next('.elements')
.find('.element')
.length;
if (length > 2) {
return length;
} else {
$(this).closest('.count').hide();
}
});
http://jsfiddle.net/qxD7W/

trying to implement a 'next' button using twitter bootstrap-tabs.js

I'm using Twitter's bootstrap and have implemented basic tabs for some help screens using bootstrap-tabs.js. I was surprised that I couldn't find any documentation on how to create a 'next' button. I'd like to create a separate 'next' button to loop through all tabs(e.g: $('#next_tour'), below). Any ideas on how to implement the javascript for this?
aside/comment: I also noticed that fragment identifiers aren't added to the url with the bootstrap solution - which might be nice to have, too. (for that feature it's making me consider this: http://flowplayer.org/tools/demos/tabs/ajax-history.html instead, but I'm undecided right now.)
<div class="span11 columns">
<div class="row">
<div id="my-tab-content" class="tab-content">
<div class="active tab-pane" id="home">
<p>Raw denim</p>
</div>
<div class="tab-pane" id="sensors">
<p>Food truck.</p>
</div>
<div class="tab-pane" id="encouragment">
<p>Banksy.</p>
</div>
<div class="tab-pane" id="teammates">
<p>biodiesel.</p>
</div>
<div class="tab-pane" id="privacy">
<p>mollit.</p>
</div>
</div>
</div>
</div>
<div class="span1 columns offset11">
<div class="row">
<a id="next_tour" class="button_blue" href="">Next</a>
</div>
</div>

Here's what I came up with, you can alter the only two selectors (a[data-toggle="tab"], ._tabs_navigation) to specify which buttons switch which tabs if you have more than one set:
$(document).ready(function() {
var tabIndex;
var tabs = $('a[data-toggle="tab"]');
tabs.on('shown', function(e) {
tabIndex = $(e.target).closest('li').index();
}).eq(0).trigger('shown');
$('._tabs_navigation').on('click', 'a', function() {
var index = tabIndex + ($(this).index() ? 1 : -1);
if (index >= 0 && index < tabs.length) {
tabs.eq(index).tab('show');
}
return false;
});
})​
Markup for buttons, only the class _tabs_navigation is important:
<div class="btn-toolbar clearfix">
<div class="btn-group pull-left _tabs_navigation" data-toggle="buttons-radio">
<a class="btn btn-small btn-info" href="#">
<i class="icon-arrow-left icon-white"></i>
</a>
<a class="btn btn-small btn-info" href="#">
<i class="icon-arrow-right icon-white"></i>
</a>
</div>
</div>
Working example:
http://jsfiddle.net/gEn8f/2/

My variant for Bootstrap 3.0 (only Next):
<ul class="nav nav-tabs" id="myTab">
<li class="active">Base tab</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="base">
<p>This is content of Tab 1</p>
Next →
</div>
<div class="tab-pane fade" id="tab2">
<p>This is content of Tab 2</p>
Next →
</div>
<div class="tab-pane fade" id="tab3">
<p>This is content of Tab 3</p>
</div>
</div>
<script>
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
tabNext = function(e) {
var nextTab = $(e).attr('href');
$('#myTab a[href="' + nextTab + '"]').tab('show');
}
})
</script>

the answer is here
http://twitter.github.com/bootstrap/javascript.html#tabs
but try the below code
<ul id="myTab" class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<p>This is content of Tab 1</p>
</div>
<div class="tab-pane fade" id="tab2">
<p>This is content of Tab 2</p>
</div>
<div class="tab-pane fade" id="tab3">
<p>This is content of Tab 3</p>
</div>
<div class="tab-pane fade" id="tab4">
<p>This is content of Tab 4</p>
</div>
</div>
<div>
‹ Prev
Next ›
</div>
<script>
var myTab, myTabsActive, tabNext, tabPrev;
$(function() {
myTabs = $('#myTab li').length;
myTabsActive = 0; //or yours active tab
tabNext = function() {
var index = myTabsActive + 1;
index = index >= myTabs ? 0 : index;
$('#myTab li:eq(' + index + ') a').tab('show');
myTabsActive = index;
}
tabPrev = function() {
var index = myTabsActive - 1;
index = index < 0 ? myTabs - 1 : index;
$('#myTab li:eq(' + index + ') a').tab('show');
myTabsActive = index;
}
});
</script>