{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 再贱就再见 的问题《Externally Linking to a Tab, Tab not changing, Boo》','https://www.manongdao.com/q-1269095.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
My issue is very similar to these questions, where I am trying to use a link to change tabs, but the link only changes the tab content, but not the active tab.
Most Similar: Bootstrap linking to a tab with an url
Pretty Similar: show tab with external link with onclick in bootstrap 3
However I am currently not finding success with either of these solutions, perhaps because I have a different version of bootstrap (or maybe because I'm just doing something dumb :p we'll see)
Here's my code
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script2.js"></script>
<!-- For Dynamic Tabs-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!--Begin Page Code-->
<ul class="nav nav-tabs" style="font-size: 20px">
<li class="active"><a data-toggle="tab" href="#tab1">Tab1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab2</a></li>
<li><a data-toggle="tab" href="#tab3">Tab3</a></li>
<li><a data-toggle="tab" href="#tab4">Tab4</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active" >
<a href="#tab2" data-toggle="tab">Link to 2</a><br>
<a href="#tab3" data-toggle="tab">Link to 3</a><br>
<a href="#tab3" data-toggle="tab">Another Link to 3</a>
</div>
<div id="tab2" class="tab-pane fade">
<p> This is tab 2 </p>
</div>
<div id="tab3" class="tab-pane fade">
<p> This is tab 3 </p>
</div>
<div id="tab4" class="tab-pane fade">
<p> This is tab 4 </p>
</div>
</div>
<!--End Page Code-->
</body>
<html>
Where script2.js is where I am trying to implement solutions. Currently this one from Bootstrap linking to a tab with an url
$(function () {
$('#tab1 a').click(function (e) {
e.preventDefault();
$('a[href="' + $(this).attr('href') + '"]').tab('show');
})
});
Anyone know how to help?
You are including your script file before you import jQuery and the bootstrap javascript files.
Since your code requires both of these libraries, you need to move your
script2.jsunderneath your other scripts:Your browsers javascript console will contain a message along the lines of:
this should always be the first place you look.
Your code works fine when used correctly: http://www.bootply.com/zP1y6wJIl1
You many want to change your links to:
You could use
window.location.hrefto get something likehttp://domain.com/index.html#tab1(not tested) but you could put: