Change the css of li and div on click using jQuery - javascript

This is my view:
<div class="tabbable">
<ul class="nav nav-tabs">
<li id="liTab1" class="active"><a id="a1" data-toggle="tab">Upload TOT Master</a></li>
<li id="liTab2"><a id="a2" data-toggle="tab">View TOT Master</a></li>
<li id="liTab3"><a id="a3" data-toggle="tab">Upload TOT Master Adhoc</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
<p>Howdy, I'm in Section 3.</p>
</div>
</div>
</div>
The above code which represents the view in tab container format like below:
On changing the tab, I want its corresponding content div should become active and remaining tab would become inactive. I used the below javascript function, but its not working:
jQuery:
$(document).ready(function () {
$("#a1").click(function () {
$("#liTab1").addClass('active');
$("#liTab2").removeClass('active');
$("#liTab3").removeClass('active');
$("#tab1").addClass('tab-pane active');
$("#tab2").addClass('tab-pane inactive');
$("#tab3").addClass('tab-pane inactive');
});
$("#a2").click(function () {
$("#liTab1").removeClass('active');
$("#liTab2").addClass('active');
$("#liTab3").removeClass('active');
$("#tab2").addClass('tab-pane active');
$("#tab1").addClass('tab-pane inactive');
$("#tab3").addClass('tab-pane inactive');
});
$("#a3").click(function () {
$("#liTab1").removeClass('active');
$("#liTab2").removeClass('active');
$("#liTab3").addClass('active');
$("#tab3").addClass('tab-pane active');
$("#tab1").addClass('tab-pane inactive');
$("#tab2").addClass('tab-pane inactive');
});
});
How to achieve this?

Twitter-bootstrap-tabs have one more property in html called data-target which when set to its corresponding tab target will automatically do this for you without any help of javascript. Check the below code and DEMO here
<ul class="nav nav-tabs">
<li id="liTab1" class="active"><a id="a1" data-target="#tab1" data-toggle="tab">Upload TOT Master</a></li>
<li id="liTab2"><a id="a2" data-target="#tab2" data-toggle="tab">View TOT Master</a></li>
<li id="liTab3"><a id="a3" data-target="#tab3" data-toggle="tab">Upload TOT Master Adhoc</a></li>
</ul>

You don't have to access the item individually nor you have to add the anchor inside the list. You can just change the pointer using css.
You can change html in this way:
<li id="liTab1" class="active" data-tab="tab1">Upload TOT Master</li>
<li id="liTab2" data-tab="tab2">View TOT Master</li>
<li id="liTab3" data-tab="tab3">Upload TOT Master Adhoc</li>
and this is the js piece of code:
$('ul.nav-tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.nav-tabs li').removeClass('active');
$('.tab-pane').removeClass('active');
$(this).addClass('active');
$("#"+tab_id).addClass('active');
});

Related

How to stay on selected tab

i know there are a lot themes about that, but i dont know why, noone of them are working
I am using AdminLTE3, i have tabs, i want to stay on selected tab after refresh
my code (not working, but should work):
#extends('adminlte::page')
#section('title', 'Mans Profils')
#section('content_header')
#stop
#section('content')
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
<li>About</li>
<li>Contacts</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home">Home</div>
<div class="tab-pane" id="about">About</div>
<div class="tab-pane" id="contacts">Contacts</div>
</div>
#stop
#section('css')
#stop
#section('js')
<script>
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
localStorage.setItem('lastTab', $(this).attr('href'));
});
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('[href="' + lastTab + '"]').tab('show');
}
});
</script>
#stop
No need to use localsStorage for that sake. just put condition over window.location.search
whichever tab has been clicked append window.location.search with that tab variable.
on reload check whether window.location.search string contains your tab variable then call the same code which is inside your tab click.

JQuery Single Page Fade In/Out Toggle w/Nav

Dudes! Longtime lurker. First question.
Simple page with nav menu triggering fade-in content div. Fade-in on click function, fade-out if toggle-target != href("#"). Script works, but this is a work around. There has to be a simpler method here.
JS:
$(document).ready(function(){
$(".toggle1").click(function(){
$('#div1').delay(500).fadeIn('fast');
$('#div2').fadeOut('slow');
$('#div3').fadeOut('slow');
});
$(".toggle2").click(function(){
$('#div2').delay(500).fadeIn('fast');
$('#div1').fadeOut('slow');
$('#div3').fadeOut('slow');
});
$(".toggle3").click(function(){
$('#div3').delay(500).fadeIn('fast');
$('#div1').fadeOut('slow');
$('#div2').fadeOut('slow');
});
});
HTML:
<div class="nav">
<ul>
<li><a class="toggle1" href="#div1">div1</a></li>
<li><a class="toggle2" href="#div2">div2</a></li>
<li><a class="toggle3" href="#div3">div3</a></li>
</ul>
</div>
Is there a way to have ONE toggle class function, and if the a href == #div, fade-in? Else, fade-out?
For clarity, I don't want the user to fade-out fadeToggle on second click of the same nav target. Only if a new target is selected, does the current div fade-out.
Thanks, people!
You can use attribute begins with selector, .filter(), .stop(), if condition to check for element opacity before proceeding with animation
$().ready(function() {
$("[class^=toggle]").click(function(e) {
e.preventDefault();
var hash = $("#" + this.href.split(/#/).pop());
if (hash.css("opacity") < 1) {
$("[id^=div]").stop().fadeTo("fast", 0)
.filter(hash).delay(500).fadeTo("slow", 1)
}
})
})
[id^="div"] {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="nav">
<ul>
<li><a class="toggle1" href="#div1">div1</a>
</li>
<li><a class="toggle2" href="#div2">div2</a>
</li>
<li><a class="toggle3" href="#div3">div3</a>
</li>
</ul>
</div>
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
This would be my fade solution. This is not exactly your solution you are looking for but i'm sure you can change it to do what you want the concept is there. You could also set .data on the element to know if that element is already faded.
https://api.jquery.com/jquery.data/
$(document).ready(function(){
$(".toggle1").click(function() {
href = $(this).attr("href");
if(href.includes("#div")) {
$('a[href=#div1]').delay(500).fadeIn('fast');
$('a[href=#div2]').fadeOut('slow');
$('a[href=#div3]').fadeOut('slow');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li><a class="toggle1" href="#div1">div1</a></li>
<li><a class="toggle2" href="#div2">div2</a></li>
<li><a class="toggle3" href="#div3">div3</a></li>
</ul>
</div>
<div id="fademe">
testing
</div>
My proposal is:
$(function () {
$('[href^="#div"]').click(function () {
$(this).delay(500).fadeIn('fast');
var siblings = $(this).parent().siblings();
$('[href="' + siblings.eq(0).children('a').attr("href") + '"]').fadeOut('slow', function() {
$('[href="' + siblings.eq(1).children('a').attr("href") + '"]').fadeOut('slow');
});
});
$('#btn').on('click', function(e) {
$('[href^="#div"]').show();
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="nav">
<ul>
<li><a class="toggle1" href="#div1">div1</a></li>
<li><a class="toggle2" href="#div2">div2</a></li>
<li><a class="toggle3" href="#div3">div3</a></li>
</ul>
</div>
<button id="btn">Make visible all elements</button>

function targeting only clicked element

i have a page with several accordions, which are working, but the js is affecting all accordions and not only the clicked on accordion as it should be. how does the JS needs to be changed that only the "clicked on" accordion changes?
here's the js:
jQuery(document).ready(function(){
jQuery('ul.tabs li').click(function(){
var tab_id = jQuery(this).attr('data-tab');
jQuery('ul.tabs li').removeClass('current');
jQuery('.tab-content').removeClass('current');
jQuery(this).addClass('current');
jQuery("#"+tab_id).addClass('current');
})
})
and here one of the accordeons:
<div class="mytabcontainer">
<ul class="tabs">
<li class="tab-link current" data-tab="A-1">BUTTON A</li>
<li class="tab-link" data-tab="B-1">BUTTON B</li>
<li class="tab-link" data-tab="C-1">BUTTON C</li>
</ul>
<div id="A-1" class="tab-content current">
content A
</div>
<div id="B-1" class="tab-content">
content B
</div>
<div id="C-1" class="tab-content">
content C
</div>
</div>
<!-- container -->
thanks!
That is because you select all accordions in the page.
You want to do something like this:
jQuery('ul.tabs li').click(function(){
var tab_id = jQuery(this).attr('data-tab');
jQuery(this).closest('.mytabcontainer').find('ul.tabs li').removeClass('current');
jQuery(this).closest('.mytabcontainer').find('.tab-content').removeClass('current');
jQuery(this).addClass('current');
jQuery("#"+tab_id).addClass('current');
})

jquery tabs with links remember last active item

I did the following code, to be able to change the class of an li tag and then change the CSS of it.
I created a cookie variable that help me to select the good li tag. but I have a gap when I click.
I have three tabs : device, links and sites.
for example if I click on devices and had click on sites before, sites will be selected.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
jQuery.cookie("select", jQuery(this).parent('li').attr('id'));
});
jQuery('#' + jQuery.cookie("select")).addClass('active').siblings().removeClass('active');
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
Since clicking the link takes you to a new page, there is no need to do this programmatically.
The page /netmg/controller/device/search should have
<li id="device" class="active">...</li>
<li id="link">...</li>
<li id="site">...</li>
The page /netmg/controller/link/search should have
<li id="device">...</li>
<li id="link" class="active">...</li>
<li id="site">...</li>
The page /netmg/controller/site/search should have
<li id="device">...</li>
<li id="link">...</li>
<li id="site" class="active">...</li>
You can put that in the HTML.
If, instead, you want to make it all one page and the href attribute indicates what content is displayed, say, in a <div id="deviceContent"></div> or similar, you could use this:
<script>
jQuery(document).ready(function() {
jQuery('.tab-links li a').click(function(e){
e.preventDefault();
var newdiv = jQuery(this).attr('href');
jQuery('.tab-links li').removeClass('active');
jQuery(this).parent('li').addClass('active');
jQuery('.contents div').hide();
jQuery(newdiv).show()
});
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device" class="active">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
<div class="contents">
<div id="deviceContent"><!-- insert some contents -->a</div>
<div id="linkContent"><!-- insert some contents --> b</div>
<div id="siteContent"><!-- insert some contents -->c</div>
</div>
For a demo, see this fiddle.

JQuery Slide Onclick

I am using the code in example http://www.faridesign.net/2012/05/create-a-awesome-vertical-tabbed-content-area-using-css3-jquery/ I am trying to slide the div tags on a button click on the list so the current tab-content will slide in and the tab just clicked will slide out. I currently have the working example where I can switch between divs fine, but I need to slide in and out between divs. Is there any script I can do this with the current code. using .slide or .effect instead of .show() looks to display two divs at the same time. I'm not sure what I am doing wrong.
<div id="v-nav">
<ul>
<li tab="tab1" class="first current">Main Screen</li>
<li tab="tab2">Div 1</li>
<li tab="tab3">Div 2</li>
<li tab="tab4">Div 3</li>
<li tab="tab5">Div 4</li>
<li tab="tab6">Div 5</li>
<li tab="tab7">Div 6</li>
<li tab="tab8" class="last">Div 7</li>
</ul>
<div class="tab-content">
<h4>Main Screen</h4>
</div>
<div class="tab-content">
<h4>Div 1</h4>
</div>
<div class="tab-content">
<h4>Div 2</h4>
</div>
<div class="tab-content">
<h4>Div 3</h4>
</div>
<div class="tab-content">
<h4>Div 4</h4>
</div>
<div class="tab-content">
<h4>Div 5</h4>
</div>
<div class="tab-content">
<h4>Div 6</h4>
</div>
<div class="tab-content">
<h4>Div 7</h4>
</div>
My Script looks like
$(function () {
var items = $('#v-nav>ul>li').each(function () {
$(this).click(function () {
//remove previous class and add it to clicked tab
items.removeClass('current');
$(this).addClass('current');
//hide all content divs and show current one
//$('#v-nav>div.tab-content').hide().eq(items.index($(this))).show();
//$('#v-nav>div.tab-content').hide().eq(items.index($(this))).fadeIn(100);
$('#v-nav>div.tab-content').hide().eq(items.index($(this))).slideToggle();
window.location.hash = $(this).attr('tab');
});
});
if (location.hash) {
showTab(location.hash);
}
else {
showTab("tab1");
}
function showTab(tab) {
$("#v-nav ul li:[tab*=" + tab + "]").click();
}
// Bind the event hashchange, using jquery-hashchange-plugin
$(window).hashchange(function () {
showTab(location.hash.replace("#", ""));
})
// Trigger the event hashchange on page load, using jquery-hashchange-plugin
$(window).hashchange();
});
Try Vertical jQuery UI Tabs. You might have to restyle a little bit, but I think the effect is what you want. You should be able to add the slide effect from http://api.jqueryui.com/slide-effect/ to the change tab event.

Categories

Resources