I am doing a project in AngularJS with Bootstrap 3. Currently, I have three navs with their respective id's as shown below:
<div class="tab">
<ul class="nav nav-pills">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tab-content">
<div id="pane1" class="tab-pane active">
<h4>The Markup</h4>
<pre>Code here ...</pre>
</div>
<div id="pane2" class="tab-pane">
<h4>Pane 2 Content</h4>
<p> and so on ...</p>
</div>
<div id="pane3" class="tab-pane">
<h4>Pane 3 Content</h4>
</div>
</div>
</div>
When panel1 is clicked, it should show the contents related to panel1. similarly to other two. But when that link is clicked, it will redirect to home page.
Related
I got this problem that when I hover on my dropdown menu, the background changes and the color does also. But i can't get it to white..
What to do?
http://hcl.konggulerodhosting.dk/index.html
<nav>
<div id="topBar" data-toggler="is-active" class=" top-bar row ">
<button type="button" data-toggle="topBar" class="mobile__close hide-for-large"> </button>
<div class="small-12 columns">
<div class="top-bar-left">
<div class="site-logo"><img src="assets/images/logo.svg" alt=""></div>
</div>
<div class="top-bar-right">
<p class="mobile__headline hide-for-large">Menu</p>
<ul data-responsive-menu="drilldown large-dropdown" data-back-button="<li class="js-drilldown-back drilldown-back"><a>Back</a></li>" class="menu">
<li class="active">Forside</li>
<li>Undersøgelser
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</li>
<li>Tilskud</li>
<li>Høreapparat</li>
<li>Information</li>
<li>Om os</li>
<li class="search__toggler">
<button type="button" data-toggle="search" id="search-toggler"></button>
</li>
</ul>
</div>
</div>
</div>
</nav>
.is-dropdown-submenu-item {
color:white;
}
is not working. So i dont know what to do..
Please don't link your site as it's bad for archiving purposes.
You need to change the link colour.
.is-dropdown-submenu-item a:hover {
color:#fff;
}
Check this image.............................................
I would like to use this code I found from Zurb Foundation documentation. Unfortunately, the tabs are laid out horizontally. I need them like this -
Here is the tab code from Zurb Foundation and the link to it as well
http://foundation.zurb.com/docs/components/tabs.html#tabs-deeplink-2
<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentational" >Tab 1</li>
<li class="tab-title" role="presentational" >Tab 2</li>
<li class="tab-title" role="presentational">Tab 3</li>
<li class="tab-title" role="presentational" >Tab 4</li>
</ul>
<div class="tabs-content">
<section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
<h2>First panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
<h2>Second panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
<h2>Third panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-4">
<h2>Fourth panel content goes here...</h2>
</section>
</div>
If you use a max width on the .tabs it should work just fine.
.tabs {
max-width: 300px;
}
Because the tabs inline and float: left the max-width will constrain them and make them go down vertically.
Working example: http://codepen.io/nathanw/pen/zxgjrO
I have a html page as B.html with tab navigation. I made tabs tabbable in my html page as below.
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
I have another html page as A.html. In A.html page, there are 2 a tags as T1 and T2. When i click T1, i need to redirect to B.html and show content own to Tab 1 and When i click T2, i need to redirect to B.html and show content own to Tab 2.
I have tried as below.
T1
T2
But this not worked. it always select tab1. How can i solve this ?
You can make use of javascript/jquery for this, read the hash value and open desired tab:
Markup:
<div class="tabbable">
<ul class="nav nav-tabs" id='my_tab'>
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
JQUERY:
var tabs = $("#my_tab");
if (window.location.hash === '#tab1') {
$('#my_tab a:first').tab('show');
}
else if(window.location.hash === '#tab2') {
$('#my_tab a:last').tab('show');
}
The above is very general code, can be optimize as per your need.
I am using this tabbed menu with twitter bootstrap.
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
I can go to the next tab by clicking on it, I want to find out if i can add a link/button and visit the next tab from the previous tab.
check out my jsfiddle: http://jsfiddle.net/L6bf7nvc/
Be sure to check that you included your jquery.js before your bootstrap.js
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
version: jquery 2.1.0 and bootstrap 3.2.0
According to the Bootstrap Tabs documentation you can do it with Javascript:
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<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>
<script>
$(function () {
$('#myTab a:last').tab('show');
})
</script>
You need only to create a link to that function, or if using unobtrusive JavaScript, create an event handler catching the 'click' on the link. Check this answer if you need more information about it.
SEE this DEMO
DEMO
js
$('#myTab a').click(function(e) {
e.preventDefault();
$(this).tab('show');
})
$('#myTab a:last').tab('show');
I have recently downloaded TB 2, and have started to familiarize myself with it. I am creating a page based on the hero example.
I am creating a page based off the hero example. The page content area is the element with class 'container' in my markup. The layout I am creating is as follows (within the 'container' element), create two columns:
Left hand column (66.66% of page area)
Right hand column (33.33% of page area)
The left hand column will contain two rows, with the top row containing nav pills, and the bottom row containing nav tabs.
This is the HTML in the 'container' element:
<div class="row">
<div id="page-left-column" class="span8">
<div class="row">
<ul class="nav nav-pills pull-right">
<li class="active">Pill 1</li>
<li>Pill 2</li>
<li>Pill 3</li>
<li>Pill 4</li>
<li>Pill 5</li>
</ul>
</div>
<div class="row">
<ul class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
</div>
<div id="page-right-column" class="span4">
<div class="row">
</div>
<div class="row">
</div>
</div>
</div>
Using Firebug, I find that both the tab and pills have spilt out of their containing element, so in the case of the nav tabs, where content is on a page, the text is no longer lining up on the left handside of the column - i.e. the text is displayed OUTSIDE the column.
Is there something wrong with the markup above?
Solutions:
Each tags such as input, div, table, ul should have a span* class. Not required, but recommended.
In order to implement % rather than px on values: row-fluid, container-fluid should be applied. Child span* will just follow its containers.
The recommended pattern is: container, span, container, span, container, span, etc.
Container may be a (container or row (fluid or not fluid)). Span may be any elements/tags inside a container.
CSS:
.border {
border: 1px solid #afafaf;
}
#page-right-column {
margin:0;
}
HTML:
<div class="container border">
<div class="span12">
<div class="row-fluid">
<div id="page-left-column" class="span8">
<div class="row">
<div class="span12">
<ul class="nav nav-pills pull-right">
<li class="active">Pill 1</li>
<li>Pill 2</li>
<li>Pill 3</li>
<li>Pill 4</li>
<li>Pill 5</li>
</ul>
</div>
</div>
<div class="row">
<div class="span12">
<ul class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
</div>
</div><!-- End of #page-left-column -->
<div id="page-right-column" class="span4">
<div class="row-fluid border">
<div class="span12">
First row of right column.
</div>
<div class="span12">
Second row of right column
</div>
</div>
</div><!-- End of #page-right-column -->
</div><!-- End of .container-fluid -->
</div>
</div><!-- End of .container -->