I have a page with topics set in a bootstrap tabbed panel.
I want to have links to the topics from another page.
Is it possible when I click to a button when I go to the tabbed page the active tab to change automatically?
i.e. on page2.html to click a link and go to tab2 or tab3 on page1.html
<!-- tabs -->
<div id="helptabs">
<!-- tab pills -->
<div class="wrap clearfix">
<div class="container" id="fpills">
<div class="row">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active">Topic 1</li><li
role="presentation">Topic 2</li><li
role="presentation">Topic 3</li>
</ul>
</div>
</div>
</div>
<!-- tab pills END -->
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">Topic 1 comes here</div>
<div role="tabpanel" class="tab-pane" id="tab2">Topic 2 comes here</div>
<div role="tabpanel" class="tab-pane" id="tab3">Topic 3 comes here</div>
</div>
<!-- tab panes END -->
</div>
<!-- tabs -->
And on the other page it should be
Topic1
Topic2
Topic3
The answer you are looking for is probably here, take a look.
Bootstrap tabs opening tabs on another page
Related
I got this code from the Bootswatch website, it supposed to work just fine :
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="">Profile</li>
<li class="">Other</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<p>Tab home!</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Tab Profile!</p>
</div>
<div class="tab-pane fade" id="other">
<p>Tab Other!</p>
</div>
</div>
But I'm using AngularJS routes, so the href links aren't working, I tried to replace href with data-target, but it doesn't work either. Please help, and is there a simple way to change the Tab class to active while active? Thank you.
You'll want to look into using Angular-UI for Bootstrap components like this. It gives you Bootstrap components like tabs that have been written specifically for AngularJS applications. Check out the "Tabs" section on that link.
I'm developing a web page in which I'm using Twitter's Bootstrap Framework and their Bootstrap Tabs JS. It works great but I am trying to add extra links outside the tabs panel to open the tabs, it works fine clicking the tabs link under the ul --> li links.
But when I click a link outside the nav panel-tabs how can I have the tab panel switch and the active class added to the nav panel-tabs li CSS class element when clicking a link outside the nav panel itself (as the active class shows a different background color in my case).
For example:
These links are outside the panel code up the page:
Gallery
Movies
I need to toggle the state of the tab class <ul class="nav panel-tabs"> --> <li> to active and remove it when the other links are clicked.
This is the panel with nav tabs:
<div class="panel-heading">
<div class="padpanel">Panel Heading</div>
<div class="pull-left">
<ul class="nav panel-tabs">
<li class="active">Profile</li>
<li>Gallery</li>
<li>Movies</li>
</ul>
</div>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="profile">Profile tab </div>
</div>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane" id="gallery">Gallery tab </div>
</div>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane" id="movies">Movies tab </div>
</div>
</div>
You can use jQuery to get the page url #hash and select the Bootstrap tab...
var hash = document.location.hash;
if (hash) {
$('.nav-tabs a[href='+hash+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
Code: http://codeply.com/go/RypzN2UXKF
Demo (select tab 2): http://codeply.com/render/RypzN2UXKF#tab2
I'm using the JavaScript Bootstrap 3 tabs as documented, like this:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
But with Angular, it's changing the URL to /#/profile for instance..
How can I prevent this?
Just put data-target instead of href attribute and it will work without changing urls.
At one point, if a link had the _target attribute set, angular wouldn't intercept those clicks. Perhaps that will work in this case?
I have a PhoneGap application wich uses a jQuery Mobile multipage layout. On every page (page A and page B) I have a navbar for switching between pages. No custom code involved. I also have a panel on every page which opens by clicking the 'new' button in the header.
Sometimes it happens that I hit the button (maybe to soft? or to fast?) to open to panel but the buttons just changes it state to "active" and the panel does not open. I cannot click the button anymore. When I change the page and go back (all by using the navbar) page A appears again and now the panel is opened. This is a strange behaviour but could be plausible. But trying to close it now is just impossible. Clicking one of the buttons in the panel is as inactive as clicking on the page itself. The whole thing seems to be froozen.
<div data-role="page" id="one">
<div data-role="header" data-transition="fixed">
New
<h1 class="header">myApp</h1>
Options
</div>
<!-- Header -->
<div data-role="panel" id="panel_one">
<div data-role="collapsible-set" class="menu"></div>
</div>
<!-- Panel -->
<div data-role="content">
<div data-role="navbar">
<ul>
<li><a href="#one" data-transition="none" class="ui-btn-active" >A</a></li>
<li><a href="#two" data-transition="none" >B</a></li>
</ul>
</div>
</div>
<!-- Content -->
</div>
<!-- Page One-->
<div data-role="page" id="two">
<div data-role="header" data-transition="fixed">
New
<h1 class="header">myApp</h1>
Options
</div>
<!-- Header -->
<div data-role="panel" id="panel_two">
<div data-role="collapsible-set" class="menu"></div>
</div>
<!-- Panel -->
<div data-role="content">
<div data-role="navbar">
<ul>
<li>A</li>
<li><a href="#two" data-transition="none" class="ui-btn-active" >B</a></li>
</ul>
</div>
</div>
<!-- Content -->
</div>
<!-- Page Two-->
menu() creates the content of the Menu which is not shown in the example. Another method (loadPanel()) is boud to the pageshow-event and will populate the sidebar with the buttons. every button will execute
var pageId = $.mobile.activePage.attr("id");
$("#panel_" + pageId).panel('close');
before anything else is executed. However, all of this works most of the time and I would just like to know if some observed a similar behaviour.
As per jQuery mobile documentation
A panel must be a sibling to the header, content and footer elements inside a jQuery Mobile page. You can add the panel markup either before or after these elements, but not in between.
Maybe you should move up your panel because it may be the cause of the strange behaviour
I am having trouble opening back up a specific tab after submitting a form. I am using Twitter Bootstrap 2.1.0. Basically, when the from is submitted, it will go back to the first tab instead of the tab where the form was submitted. Here is my code:
<ul class="nav nav-tabs" id="myTab">
<li class="active">Tab 1</li>
<li>Form Tab</li>
</ul>
<div class="tab-content">
<div class="tab-pane active fade in" id="tab1">
Content goes in here
</div>
<div class="tab-pane fade in" id="formtab">
<form action="http://myurl.com#formtab" class="center active" method="post">
form stuff goes in here
</form>
</div>
<div>
I figured that adding the #id at the end of the link would make the browser open up that specific tab but it goes back to the tab1 tab. Any help would be appreciated. Thanks