I'm trying to have all tabs closed when I arrive on the page. Then, they should be activated on hover. Here's what I've done so far. I think I've done the hover part well, but I can't find how to close my tabs by default. Apparently removing the .active in HTML doesn't work.
<!-- TABS -->
<div class="col-xs-3 hidden-xs">
<div class="row">
<nav class="side-nav">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="full-width active">
TAB1
</li>
<li role="presentation" class="full-width">
TAB2
</li>
</ul>
</nav>
</div>
</div>
<!-- TAB CONTENT -->
<div class="tab-content col-xs-9">
<div role="tabpanel" class="tab-pane row active" id="tab1">
<div class="col-xs-4">
TAB CONTENT 1
</div>
</div>
<div role="tabpanel" class="tab-pane row active" id="tab2">
<div class="col-xs-4">
TAB CONTENT 2
</div>
</div>
</div>
This is my script
$('.nav-tabs > li > a').hover(function() {
$(this).tab('show');
});
I think you just have to remove the active class on your tab contents as you said.
Bootply : http://www.bootply.com/bXCz8Y7ZOh
HTML :
<!-- TAB CONTENT -->
<div class="tab-content col-xs-9">
<div role="tabpanel" class="tab-pane row" id="tab1">
<div class="col-xs-4">
TAB CONTENT 1
</div>
</div>
<div role="tabpanel" class="tab-pane row" id="tab2">
<div class="col-xs-4">
TAB CONTENT 2
</div>
</div>
</div>
Update with extanded javascripts: Over and Leave Toggle...
I think there should have better solutions than this one but it's working...
JS:
$('.nav-tabs > li > a').on('mouseover', function() {
$(this).tab('show');
});
$('.nav-tabs > li > a').on('mouseleave', function() {
// remove active class on the tab panel
$($(this).attr('href')).removeClass('active');
// remove active class on the tab tab
$(this).parent().removeClass('active');
});
Bootply: http://www.bootply.com/vTXnT8VckW
Related
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,
});
});
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>
hi i have a bootstrap tab shown within another bootstrap tab.
i have these content in a html file which is loaded using ajax request. when page is refreshed .if user is in a particular tab say main2 ->sub2 , after the content is loaded i want to show the same main2->sub2 tab not main1->sub1 tab
refresh is triggered using a separate button in main.html
main.html
<a onclick="data_reload_refresh()"><button type="button" class="btn btn-success" id="refresh_button" style="float:right;background-color:#6D6A66;border-color:#312D25;"> Refresh</button> </a>
<#include "./tabs.html">
tabs.html
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6" style="width: 100%; margin-left: -18px;">
<div class="panel with-nav-tabs panel-primary">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">Main 1</li>
<li> Main 2</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tabone">
<div class="row">
<div class="col-md-6" style="width: 100%">
<div class="panel with-nav-tabs panel-info">
<div class="panel-heading">
<ul class="nav nav-tabs" style="color: red;">
<li>sub 1</li>
<li>sub 2</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tabsub1">1st Tab Sub 1</div>
<div class="tab-pane fade " id="tabsub2">1st Tab Sub 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade " id="tabtwo">
<div class="row">
<div class="col-md-6" style="width: 100%">
<div class="panel with-nav-tabs panel-info">
<div class="panel-heading">
<ul class="nav nav-tabs" style="color: red;">
<li>sub 1</li>
<li>sub 2</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tabsub11">2nd Tab Sub 1</div>
<div class="tab-pane fade " id="tabsub22">2nd Tab Sub 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
tabs.html will be returned by ajax request .i want to retain the tab in both inner and outer tab ,which is shown prior to refresh,after content is refreshed.
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>