Targetting URL in foundation tab
HTML
<script src="http://cms-boutique.com/foundation/js/jquery.js"></script>
<link rel="stylesheet" href="http://foundation.zurb.com/docs/assets/css/docs.css">
<script src="http://foundation.zurb.com/docs/assets/js/all.js"></script>
<ul id="menu" class="dropdown">
<li><a href="#tab1">Industries we serve</a></li>
<li><a href="#tab2">Safety</a></li>
<li><a href="#tab3">Competitive advantages</a></li>
</ul>
<div id="LOOK_MY_ID" class="corporation-frame">
<dl class="tabs" data-tab>
<dd class="active"><a href="#tab1" title="Industries we serve" onclick="navigateTab(event)">Industries we serve</a>
</dd>
<dd><a href="#tab2" title="Safety" onclick="navigateTab(event)">Safety</a>
</dd>
<dd><a href="#tab3" title="Competitive advantages" onclick="navigateTab(event)">Competitive advantages</a>
</dd>
</dl>
<div class="tabs-content left">
<div class="content active" id="tab1">
<p>With over 36 years solid building experience and high-performance operation in the greater Manatee/Sarasota region, <strong>BMMI</strong> is well-known for tackling and timely delivering on the most difficult construction layouts and for consistently providing superior results.</p>
<p>We specialize in large custom projects with intricate floor plans. No design is too complex for us.</p>
</div>
<div class="content active" id="tab2">
<p>With over 36 years solid building experience and high-performance operation in the greater Manatee/Sarasota region, <strong>BMMI</strong> is well-known for tackling and timely delivering on the most difficult construction layouts and for consistently providing superior results.</p>
</div>
<div class="content active" id="tab3">
<p>With over 36 years solid building experience and high-performance operation in the greater Manatee/Sarasota region, <strong>BMMI</strong> is well-known for tackling and timely delivering...
CSS
/* TABS */
.corporation-frame dl {
list-style:none;
padding:10px 0;
}
.corporation-frame dl dd {
display:block;
float:left;
margin: 0 20px;
padding:3px 0;
font-size: 14px;
}
.corporation-frame .border {
border-bottom:none;
}
.corporation-frame ul li a, .corporation-frame ul li a:hover {
color:#5a0e1d;
text-decoration:none;
}
.corporation-frame dl dd.active {
font-weight:bold;
}
.tabs {
*zoom: 1;
margin-bottom: 0 !important;
}
.tabs:before, .tabs:after {
content:" ";
display: table;
}
.tabs:after {
clear: both;
}
.tabs dd {
position: relative;
margin-bottom: 0 !important;
top: 1px;
float: right;
}
.tabs dd > a {
display: block;
background: #efefef;
color: #222222;
padding-top: 0.88889rem;
padding-right: 1.77778rem;
padding-bottom: 0.94444rem;
padding-left: 1.77778rem;
font-family:"Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important;
font-size: 0.88889rem;
}
.tabs dd > a:hover {
background: #e2e2e2;
}
.tabs dd.active a {
background: white;
}
.tabs.radius dd:first-child a {
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-topleft: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.tabs.radius dd:last-child a {
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.tabs.vertical dd {
position: inherit;
float: none;
display: block;
top: auto;
}
.tabs-content {
*zoom: 1;
margin-bottom: 1.33333rem;
}
.tabs-content:before, .tabs-content:after {
content:" ";
display: table;
}
.tabs-content:after {
clear: both;
}
.tabs-content > .content {
display: none;
float: right;
...
JavaScript
window.navigateTab = function (event) {
var url = $(event.target).attr('href');
var target = url.split('#')[1];
if (target.substr(0, 3) == 'tab') {
var state = {
tab: target.substr(3)
};
selectTab("LOOK_MY_ID", state.tab); //<-- change the tab
history.pushState(state, null, url); //<-- change the url
event.preventDefault();
}
}
window.onpopstate = function (event) {
if (event.state != null) {
selectTab("LOOK_MY_ID", event.state.tab); //<-- change the tab
}
};
function selectTab(id, tab) {
// activate only the right tab:
var tab = $("#" + id + " > dl > dd:nth-child(" + tab + ")");
var a = $("a", tab);
target = $('#' + a.attr("href").split('#')[1]);
siblings = tab.siblings();
settings = tab.closest('[data-tab]').data('tab-init');
tab.addClass(settings.active_class);
siblings.removeClass(settings.active_class);
target.siblings().removeClass(settings.active_class).end().addClass(settings.active_class);
}
$('#menu a').on("click", navigateTab);
$(document).foundation();