Joomla Templates Club 406,261 posts

[ger12 Friend ger12Join date: May 2012Posts: 185Downloads:7Uploads:0 Thanks: 62 Thanked: 8 times in 1 posts]

#204957

Hi I use that code to show some tabs:

<div role=”tabpanel”>
<!– Nav tabs –></p>

<ul class=”nav nav-tabs” role=”tablist”>
<li class=”active” role=”presentation” style=”text-align: left;”><a aria-controls=”home” class=”vt-p” data-toggle=”tab” href=”#home” role=”tab”>REPORTES & ESTADISTICAS</a></li>
<li role=”presentation” style=”text-align: left;”><a aria-controls=”profile” class=”vt-p” data-toggle=”tab” href=”#profile” role=”tab”>INTEGRACIÓN CON TU SITIO HACELOSIMPLE</a></li>
<li role=”presentation” style=”text-align: left;”><a aria-controls=”messages” class=”vt-p” data-toggle=”tab” href=”#messages” role=”tab”>AUTODJ & MÁS</a></li>
</ul>

<p><!– Tab panes –></p>
<!– Tab panes –>

<div class=”tab-content”>
<div class=”tab-pane active” id=”REPORTES & ESTADISTICAS” role=”tabpanel”>1…</div>

<div class=”tab-pane” id=”INTEGRACIÓN CON TU SITIO HACELOSIMPLE” role=”tabpanel”>2…</div>

<div class=”tab-pane” id=”AUTODJ & MÁS” role=”tabpanel”>3…</div>
</div>
</div>

But allways show the content of the first tab (…1) >:(

Which part of the code is wrong? or I need different code to put tabs. Could you tell me please the easy way.

Thanks in advance.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#564362

Hi Please check the example given here

Use the same #id in the tab anchor and in the content Div . like give in above link .
Below is example


<div class="col-lg-8">
<h2>Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li class="open"><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div id="home" class="tab-pane fade active in">
<p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
</div>
<div id="profile" class="tab-pane fade">
<p>get for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
<p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
</div>
</div>
</div>


1 user says Thank You to Pankaj Sharma for this useful post

1. ger12

[ger12 Friend ger12Join date: May 2012Posts: 185Downloads:7Uploads:0 Thanks: 62 Thanked: 8 times in 1 posts]

#564447

Sorry, its not work for me.

I use that code

<div class=”col-lg-14″>
<ul class=”nav nav-tabs”>
<li class=”active”><a class=”vt-p” data-toggle=”tab” href=””>REPORTES & ESTADISTICAS</a></li>
<li class=”open”><a class=”vt-p” data-toggle=”tab” href=””>INTEGRACIÓN CON TU SITIO HACELOSIMPLE</a></li>
<li class=”open”><a class=”vt-p” data-toggle=”tab” href=””>AUTODJ & MÁS</a></li>
</ul>

<div class=”tab-content” id=”myTabContent”>
<div class=”tab-pane fade active in” id=”REPORTES & ESTADISTICAS”>…1</div>

<div class=”tab-pane fade active in” id=”INTEGRACIÓN CON TU SITIO HACELOSIMPLE”>…2</div>

<div class=”tab-pane fade active in” id=”AUTODJ & MÁS”>…3</div>
</div>
</div>

Result:

this is the URL: http://www.hacelosimple.com/radiosimple

Please help.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#564450

<em>@ger12 465238 wrote:</em><blockquote>Sorry, its not work for me.

I use that code

<div class=”col-lg-14″>
<ul class=”nav nav-tabs”>
<li class=”active”><a class=”vt-p” data-toggle=”tab” href=””>REPORTES & ESTADISTICAS</a></li>
<li class=”open”><a class=”vt-p” data-toggle=”tab” href=””>INTEGRACIÓN CON TU SITIO HACELOSIMPLE</a></li>
<li class=”open”><a class=”vt-p” data-toggle=”tab” href=””>AUTODJ & MÁS</a></li>
</ul>

<div class=”tab-content” id=”myTabContent”>
<div class=”tab-pane fade active in” id=”REPORTES & ESTADISTICAS”>…1</div>

<div class=”tab-pane fade active in” id=”INTEGRACIÓN CON TU SITIO HACELOSIMPLE”>…2</div>

<div class=”tab-pane fade active in” id=”AUTODJ & MÁS”>…3</div>
</div>
</div>

Result:

this is the URL: http://www.hacelosimple.com/radiosimple

Please help.</blockquote>

Hi You have added wrong again .
Please check below code carefully


<div class="col-lg-8">
<h2>Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li class="open"><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div id="home" class="tab-pane fade active in">
<p>This is mytab content </p>
</div>
<div id="profile" class="tab-pane fade">

<p>This is profile tab </p>
</div>
</div>
</div>


You can in the above code for example Profile tab anchor is using #profile and is pointed to div id profile

You also need to define same id for your content currently the tab anchor and div id are not same so its not working .
Define link as in the code i provided .

You can use above code first run it on your site and see the difference .

[Author]

Posts