Hi I'm trying to add the Tabs Component inside OwlCarousel2 Item but the Tab Content not displayed where this error is coming from?
I try to fix this issue but nothing is work.
**I made some examples here to show you the issue **
HTML CODE :
<section id="example-carousel">
<div class="owl-carousel owl-theme">
<div class="w-100 vh-100 d-flex align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-xl-10">
<div class="item">
<h1>What is Lorem Ipsum?</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
<div class="col-12">
<!-- Tab -->
<div>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link active" id="nav-example1-tab" data-bs-toggle="tab" href="#nav-example1" role="tab" aria-controls="nav-example1" aria-selected="true">Example 1</a>
<a class="nav-link" id="nav-example2-tab" data-bs-toggle="tab" href="#nav-example2" role="tab" aria-controls="nav-others" aria-selected="false">Example 2</a>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane fade show active" id="nav-example1" role="tabpanel" aria-labelledby="nav-example1-tab">
<h3>Tab Pane Example 1</h3>
</div>
<div class="tab-pane fade" id="nav-example2" role="tabpanel" aria-labelledby="nav-example2-tab">
<h3>Tab Pane Example 2</h3>
</div>
</div>
</div>
<!-- End Tab -->
</div>
</div>
</div>
</div>
</div>
</section>
JS CODE :
jQuery(document).ready(function($) {
// OwlCarousel2
var owl = $('.owl-carousel');
owl.owlCarousel({
loop:true,
margin:0,
nav:false,
});
});
Related
I have a slider on a page, I need the link in that slider to send it to another page with a specific tab open.
I tried to use # 1 at the end of the link however it does not work.
I think i have to use some js to do this, have to put active class on tab and remove the active from first tab. And they will have several sliders that will send to that same page with another open tab.
SLIDER
<div class="container-fluid">
<div class="row text-center my-3">
<div class="row mx-auto my-auto central_slider_prod">
<div id="recipeCarousel" class="carousel slide w-100 tamanho_carousel" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<img class="img-fluid" src="test1.jpg" /><span>Test 1</span>
</div>
<div class="carousel-item">
<img class="img-fluid" src="test2.jpg" /><span>Test 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
TABS
<div id="exTab2" class="container alinha-tab">
<ul class="nav nav-tabs">
<li class="bt_prod_1">
<a id="bt_prod_2" class="active" href="#1" data-toggle="tab">
Test 1
</a>
</li>
<li class="bt_prod_1">
<a id="bt_prod_3" href="#2" data-toggle="tab">
Test 2
</a>
</li>
</ul>
<div class="tab-content">
<!-- TAB #1 -->
<div class="tab-pane active" id="1">
<div class="container-fluid">
<div class="row">
Test 1
</div>
</div>
</div>
<!-- TAB #2 -->
<div class="tab-pane" id="2">
<div class="container-fluid">
<div class="row">
Test 2
</div>
</div>
</div>
</div>
</div>
</div>
To open a new tab you add target="_blank" to your anchor link
<img class="img-fluid" src="test2.jpg" /><span>Test 2</span>
Try this in your js if you use jquery:
$(window.location.hash).tab('show');
Question:
When I load my page, the active tab doesnt show anything. It only does when I go to a different tab and then back. When I reload the page, the 'active' tab is empty again.
So,
When I load the page, the 'home' tab is empty. If I go to 'prijslijst' (prijslijst is filled correctly) and then back to 'home', 'home' is filled. If I were to reload the page, 'home' is empty yet again.
HTML:
<section class="no-padding">
<div class="row">
<div class="wrapper-selector">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Woningselector</li>
<li role="presentation">Prijslijst</li>
</ul>
<div class="tab-content">
<!--Selector Tab-->
<div role="tabpanel" class="tab-pane fade active" id="home">
<div class="selector" style="position: relative;">
<div id="mapwrapper">
<img id="Woningselector" alt="Woningselector" usemap="#Woningselector"/>
</div>
<map name="Woningselector" id="mapWoningselector"></map>
</div>
</div>
<!--Prijslijst Tab-->
<div role="tabpanel" class="tab-pane fade" id="prijslijst">
{include file="componenten/prijslijst.tpl"}
</div>
</div>
</div>
</div>
</section>
You can check the the HTML using browser console & see what happen when you back to first tab (click on first tab).
You need to use active in instead of active.
<section class="no-padding">
<div class="row">
<div class="wrapper-selector">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Woningselector
</li>
<li role="presentation">Prijslijst</li>
</ul>
<div class="tab-content">
<!--Selector Tab-->
<div role="tabpanel" class="tab-pane fade active in" id="home">
<div class="selector" style="position: relative;">
<div id="mapwrapper">
<img id="Woningselector" alt="Woningselector" usemap="#Woningselector"/>
</div>
<map name="Woningselector" id="mapWoningselector"></map>
</div>
</div>
<!--Prijslijst Tab-->
<div role="tabpanel" class="tab-pane fade" id="prijslijst">
{include file="componenten/prijslijst.tpl"}
</div>
</div>
</div>
</div>
</section>
Using the Twitter Bootstrap framework, I'm attempting to have a section of content appear conditionally using the tabs feature: http://getbootstrap.com/javascript/#tabs
The issue I'm having is that the content in the div classed as "tab-pane-active" is always appearing, regardless of the tab selected. (When other tabs are selected, their content appears below the content in this div)
Code for the tabs
<ul class="nav nav-tabs" role="tablist" style="margin-top:30px; margin-left:250px;">
<li role="presentation" class="active">Product Information</li>
<li role="presentation">Shipping Information</li>
<li role="presentation">Usage Instructions</li>
<li role="presentation">Testimonials</li>
<li role="presentation">FAQ</li>
</ul>
Code for the content
<div class="tab-content">
<div role="tabpanel" class="tab-pane-active" id="t1">
<h3>Product Information</h3>
<p>Product information here
</div>
<div role="tabpanel" class="tab-pane" id="t2">
<h3>Shipping Information</h3>
<p>Shipping info here</p>
</div>
<div role="tabpanel" class="tab-pane" id="t3">
<h3>Using Instructions</h3>
<p>Usage info here</p>
</div>
<div role="tabpanel" class="tab-pane" id="t4">
<h3>Testimonials</h3>
<p>Testimonials here</p>
</div>
<div role="tabpanel" class="tab-pane" id="t5">
<h3>FAQ</h3>
<p>FAQ here</p>
</div>
</div>
If I change the class "tab-pane-active" to "tab-pane", the tabs work as intended however the content in the first div doesn't appear by default as it should.
I've used this feature successfully elsewhere on my website with no differences in syntax, and can't determine why it isn't working here.
This is because the class is tab-pane active your div has the class of tab-pane-active
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="t1">
<h3>Product Information</h3>
<p>Product information here
</div>
<div role="tabpanel" class="tab-pane" id="t2">
<h3>Shipping Information</h3>
<p>Shipping info here</p>
</div>
<div role="tabpanel" class="tab-pane" id="t3">
<h3>Using Instructions</h3>
<p>Usage info here</p>
</div>
<div role="tabpanel" class="tab-pane" id="t4">
<h3>Testimonials</h3>
<p>Testimonials here</p>
</div>
<div role="tabpanel" class="tab-pane" id="t5">
<h3>FAQ</h3>
<p>FAQ here</p>
</div>
</div>
I have togglable tabs using Twitter Bootstrap. My problem is that my .tab-content is hidden and I want to show it when the mouse pointer enters the .nav-tabs > li and hide it when the mouse pointer leaves the elements.
Here is my code:
<div role="tabpanel" class="tabpanel">
<div class="container">
<!-- company tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a href="#sigma" aria-controls="sigma" role="tab" data-toggle="tab" class="boxopacity">
<span>TAb1</span>
</a>
</li>
<li role="presentation">
<a href="#alpek" aria-controls="alpek" role="tab" data-toggle="tab" class="boxopacity">
<span>TAb2</span>
</a>
</li>
<li role="presentation">
<a href="#nemak" aria-controls="nemak" role="tab" data-toggle="tab" class="boxopacity">
<span>TAb3</span>
</a>
</li>
</ul><!-- .end company tabs -->
<!-- company information -->
<div class="tab-content">
<!-- company sigma -->
<div role="tabpanel" class="tab-pane fade" id="sigma">
<div class="box largebox">
<div class="content">
<h5>Tab1</h5>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Productos principales</h6>
<h6>Mercados</h6>
<ul>
<li>Alimentos</li>
</ul>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Cifras relevantes</h6>
<ul class="relevant">
</ul>
</div>
</div>
<div class="box mediumbox">
</div>
</div>
<!-- company alpek -->
<div role="tabpanel" class="tab-pane fade" id="alpek">
<div class="box largebox">
<div class="content">
<h5>Tab2</h5>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Productos principales</h6>
<h6>Mercados</h6>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Cifras relevantes</h6>
<ul class="relevant">
<li>Plantas</li>
</ul>
</div>
</div>
<div class="box mediumbox">
</div>
</div>
<!-- company nemak -->
<div role="tabpanel" class="tab-pane fade" id="nemak">
<div class="box largebox">
<div class="content">
<h5>Tab3</h5>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Productos principales</h6>
<h6>Mercados</h6>
<ul>
<li>Automortiz.</li>
</ul>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Cifras relevantes</h6>
<ul class="relevant">
</ul>
</div>
</div>
<div class="box mediumbox">
</div>
</div>
</div><!-- .end company information -->
</div>
</div>
My Jquery:
<script>
$(document).ready(function (){
$('.nav-tabs > li > a').hover(function () {
$(this).tab('show');
}, function () {
});
});
</script>
You can do it with mouseenter & mouseleave like this fiddle I've just created:
http://jsfiddle.net/jep0n6p9/3/
jQuery
$( '.nav-tabs' ).mouseenter( handlerIn );
$( '.tab-content' ).mouseleave( handlerOut );
function handlerIn() {
$('.tab-content').show();
}
function handlerOut() {
$('.tab-content').hide();
}
Please use mouseleave event on nav-tab to hide content of tabs.
Please check this link : http://jsfiddle.net/yLq1df22/
Hope this might be helpful to you.
I just used a Bootstrap .nav-tabs which actually makes the tab function of showing/hidding content:
<div class="tabbable">
<ul class="nav nav-tabs">
<li>Perfiles</li>
<li>Mallas</li>
<li>Láminas</li>
<li>Corrugado</li>
<li>Cables</li>
<li>Tecnológico</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab-perfiles">
</div>
<div class="tab-pane" id="tab-mallas">
</div>
</div>
</div>
So clicking at any tab will make the div inside .tab-content being displayed and hiding the rest.
But what about using a .nav-list?
For example, I got:
<ul class="nav nav-list">
<li class="active">Home</li>
<li>Info</li>
<li>Applications</li>
<li>Profile</li>
<li>Team</li>
</ul>
I want it to be able to do the same, I tried using it within a .tabbable and adding a .tab-content below but got not results.
Actually I'd like the .nav-list and its contents to be inside a .tab-content:
<div class="tabbable">
<ul class="nav nav-tabs">
<li>Perfiles</li>
<li>Mallas</li>
<li>Láminas</li>
<li>Corrugado</li>
<li>Cables</li>
<li>Tecnológico</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab-perfiles">
<div class="row tab-categoria-producto">
<div class="col-sm-3">
<ul class="nav nav-list">
<li class="active">Home</li>
<li>Sasha</li>
<li>Applications</li>
<li>Profile</li>
<li>Akira</li>
</ul>
</div>
<div class="col-sm-2">
<div id="sasha">Hola Sasha</div>
</div>
<div class="col-sm-2">
<div id="akira">Hola Akira</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-mallas">
</div>
<div class="tab-pane" id="tab-laminas">
</div>
<div class="tab-pane" id="tab-corrugado">
</div>
<div class="tab-pane" id="tab-cables">
</div>
<div class="tab-pane" id="tab-tecnologico">
</div>
<!-- Fin tab content -->
</div>
</div> <!-- Fin tabbable -->
I include this fiddle
This is possible without your own JS. You just need the correct structure and class names.
Here's your corrected markup:
<!-- Top Tabs -->
<ul class="nav nav-tabs">
<li class="active">Perfiles</li>
<li>Mallas</li>
<li>Láminas</li>
<li>Corrugado</li>
<li>Cables</li>
<li>Tecnológico</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-perfiles">
<div class="container-fluid">
<div class="row tab-categoria-producto">
<!-- Tab 1 navigation -->
<ul class="col-sm-3 nav nav-list">
<li class="active">Sasha</li>
<li>Akira</li>
</ul>
<!-- Tab 1 content -->
<div class="col-sm-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="sasha">Hola Sasha</div>
<div class="tab-pane" id="akira">Hola Akira</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-mallas">Content 2</div>
<div class="tab-pane" id="tab-laminas">Content 3</div>
<div class="tab-pane" id="tab-corrugado">Content 4</div>
<div class="tab-pane" id="tab-cables">Content 5</div>
<div class="tab-pane" id="tab-tecnologico">Content 6</div>
<!-- Fin tab content -->
</div>
Demo
Here's another demo of this that's less busy (it has less tabs and is cleaner as it only uses the necessary classes, rather than the OP's additional ones), in case others want to see it).
Nice clean demo
Take a look at following example, a simple effort from my side. I hope it may work for you:
<div id="rootwizard">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>