Menu icon Foundation
Tabs problem

hi all,

i cant seem to get these tabs to work,
can anybody see anything wrong here?

Thanks :)

<dl class="tabs"> 
    <dd> 
		<a href="#item38158_0Tab">tabName1</a>  
	</dd>
	<dd> 
		<a href="#item38158_1Tab">tabName2</a> 
    </dd> 
		
</dl>


<ul class="tabs-content"> 
	<li class="cf" id="item38158_0Tab"> <strong><p> contenido 1</p> </strong> </li> 
	<li class="cf" id="item38158_1Tab"> <strong><p> contenido 2</p> </strong> </li> 
</ul>

foundation3tabs

hi all,

i cant seem to get these tabs to work,
can anybody see anything wrong here?

Thanks :)

<dl class="tabs"> 
    <dd> 
		<a href="#item38158_0Tab">tabName1</a>  
	</dd>
	<dd> 
		<a href="#item38158_1Tab">tabName2</a> 
    </dd> 
		
</dl>


<ul class="tabs-content"> 
	<li class="cf" id="item38158_0Tab"> <strong><p> contenido 1</p> </strong> </li> 
	<li class="cf" id="item38158_1Tab"> <strong><p> contenido 2</p> </strong> </li> 
</ul>

This post has been closed. No new replies can be added.

James about 6 years ago

At the moment, Custom Built Foundation doesn't include the Tabbing CSS for some reason, I think (bug?). In any case, adding the following to foundation.css should fix it (also make sure to include foundation.css as opposed to foundation.min.css):

.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: left; }
    .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: left;
    /*padding: 0.83333rem 0;*/ }
    .tabs-content > .content.active {
      display: block; }
    .tabs-content > .content.contained {
      padding: 0.83333rem; }
  .tabs-content.vertical {
    display: block; }
    .tabs-content.vertical > .content {
      padding: 0 0.83333rem; }

@media only screen and (min-width:40.063em) {
  .tabs.vertical {
    width: 20%;
    float: left;
    margin-bottom: 1.25rem; }
  .tabs-content.vertical {
    width: 80%;
    float: left;
    margin-left: -1px; } }

Ulises about 6 years ago

mm, well, other tabs in the same site seem to work fine.

i am using foundation3, if case that makes a difference.

Ulises about 6 years ago

doh..
found it,
the links have to be like

<dd> 
    <a href="#item38158_0">tabName1</a>  
  </dd>

the 'Tab' at the end of the href was the problem.
i guess it pays to read the docs closely ;)