Currently I have multiple tab navigations on 1 html page and when I click on one navigation it effects the other tab navigations.
I cant seem to figure out how to just effect the tab navigation that I am clicking without hiding the content of other tab navigations.
here is my jquery code
// thumbs click
$('.tabsNav li a').click(function(){
$('.tab').hide();
$($(this).attr('href')).show();
return false;
});
heres my html that I want use multiple times on the page
<div class="rightContent">
<ul class="tabsNav clearfix">
<li>
vlogs
</li>
<li>
mini-docs
</li>
<li>
trailers
</li>
</ul>
<div id="vlogs" class="tab">
</div>
<div id="miniDocs" class="tab">
</div>
<div id="trailers" class="tab">
</div>
</div>
As long as you have a div like the rightContent around it (or anything else), this should work:
$('.tabsNav li a').click(function(){
$(this).parents('tabsNav').parent().find('.tab').hide();
$($(this).attr('href')).show();
return false;
});
$('.tabsNav li a').click(function(){
$(this).parents('.tabsNav').parents('.rightContent').children('.tab').hide();
$($(this).attr('href')).show();
return false;
});
Related
I am designing a widget style using HTML ul tag.
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a></li>
<li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a></li>
<li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a></li >
<li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
And I have 4 divs.
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
I only want to show the li's href div that has currently been clicked. I only want to use HTML / CSS and jQuery.
This is the basic idea. You can improvise as per your need. I have set the target li's id as data attribute in to div where you will click. Now on click of that div i gets li's id so we can make that shown and all else li hide.
$(document).ready(function(){
$('.tab').click(function(){
$('.tabs li').hide();
var idTab = $(this).data('id');
$('#' + idTab).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a>
</li><li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a>
</li><li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a>
</li ><li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
</div>
<div id="basic_information" data-id="basic-li" class="tab">//basic info</div>
<div id="master_passenger" data-id="master-passenger-li" class="tab">//master passenger</div>
<div id="other-passenger" data-id="other-passenger-li" class="tab">//other passenger</div>
<div id="confirm" data-id="confirm-li" class="tab">//confirm</div>
Cheers...!!
This can be achieved via the following changes to your HTML, and the addition of the jQuery script below:
<ul>
<!-- add data-target attribute to each "a", with value matching corresponding tab -->
<li>
<a data-target="basic_information" href='#basic_information'>Basic</a>
</li>
<li>
<a data-target="master_passenger" href='#master_passenger'>Master Passenger</a>
</li>
<li>
<a data-target="other-passenger" href='#all_passengers'>Other Passengers</a>
</li>
<li>
<a data-target="confirm" href='#confirm'>Confirmation</a>
</li>
</ul>
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
<script>
$(function() {
// Hide all tabs by default
$('.tab').hide()
// Assign click handler to all elements with data target attribute
$('[data-target]').click(function() {
// Hide all tabs
$('.tab').hide()
// Extra target id of the menu link that was clicked
var tabToShow = $(this).data('target')
// Show the corresponding tab
$('#' + tabToShow).show()
// Return false to prevent default navigation behaviour of links
return false
})
})
</script>
I have a single page site with content placed inside an accordion. I need to both open and scroll to the accordion item when a user clicks on my nav at the top of the page. I found a couple similar functions, this being the closest (Open JQuery accordion when link with an id of element within the accordion is clicked) but unfortunately the jsfiddle links are no longer working.
Right now I just have thecode to get the accordion working...Need to get the scroll to part in there somehow...Thanks!
Code
var accordion_head = $('.accordion > li > .toggle-bar');
accordion_head.on('click', function (event) {
var $a = $(this);
event.preventDefault();
if ($a.hasClass('active')) {
$a.removeClass('active').siblings('.content-wrapper').slideUp();
}
else {
$a.addClass('active').siblings('.content-wrapper').slideDown();
}
});
.accordion li .content-wrapper {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
<li id="1">
<a class="toggle-bar" href="#one"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
<li id="2">
<a class="toggle-bar" href="#two"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
<li id="3">
<a class="toggle-bar" href="#three"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
</ul>
I have a problem with a drop down menu that must remain open to the click.
After the menu is open, you can click the link inside and the menu item just clicked.
How can I do to remedy the preventDefault ?
Menu HTML:
<nav class="main-menu">
<ul id="" class="menu">
<li>
Menu One
<div class="sub-menu">
<ul>
<li>test test test</li>
... More links ...
</ul>
</div>
</li>
... More items ...
</ul>
</nav>
This is a portion of code
$('.main-menu li a').click(function(event) {
event.preventDefault();
$('.main-menu').find('.sub-menu').removeClass('open');
$(this).parent().find('.sub-menu').addClass('open');
});
An example is visible here JSFIDDLE
Just remove
$('.main-menu').find('.sub-menu').removeClass('open');
Here is a fiddle you can check out
Get rid of event.preventDefault();
Instead do like this
<a href="#" onclick="return false">
Then give each main menu a class name. And call the click event on that class.
https://jsfiddle.net/btevfik/9m9rufqx/3/
You can replace your selector with a more targeted (.menu > li > a) :
$('.menu > li > a').click(function(event) {
event.preventDefault();
$('.sub-menu.open').removeClass('open');
$(this).parent().find('.sub-menu').addClass('open');
});
JSFiddle
I am trying to create a menu navigation sort of like tab's but with vertical buttons.. When I start the page, the first li class is removed and when I click any other link nothign happens other then my content div's being shown..
The first link should always be active on page start.
<script type="text/javascript">
$(document).ready(function() {
var tabContainers = $('div.pages > div');
$('div.sidemenu ul.list a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.sidemenu ul.list li').removeClass('active');
$(this).addClass('active');
return false;
}).filter(':first').click();
});
</script>
<div class="sidemenu">
<ul class="list">
<li class="active">Login & Password</li>
<li>Contact Details</li>
<li>Company & Branch Details</li>
<li>Address Details</li>
</ul>
</div>
<div class="pages">
<div id="first">
CONTENT 1
</div>
<div id="second">
CONTENT 2
</div>
<div id="third">
CONTENT 3
</div>
<div id="forth">
CONTENT 4
</div>
</div>
Not sure what I am missing here.. Maybe its cuase I just woke up and still on my first cup of coffee.. ;)
You're adding the class to the <a> element, but removing it from its parent <li> element.
$(this).addClass('active'); // "this" is the <a> that received the event
// This removes "active" from the <li>
$('div.sidemenu ul.list li').removeClass('active');
Looks like you intend for the <li> to have the class. So you'd do this instead:
$(this).parent().addClass('active');
Or if you don't mind me mixing a little DOM API in:
$(this.parentNode).addClass('active');
Now go get a refill! ;o)
you add the "active" class to the A-Element
$(this).addClass('active');
i guess you want to add it to the LI-Element, so either you add
$(this).parent().addClass('active');
or you register the onclick on the LI-Element
I am trying to hide the current tab which is displayed and fadein the new tab based on its href using jquery...
Here is my HTML
<div id="leader">
<ul id="llist">
<li class="t current"><span>sage solutions</span></li>
<li class="m"><span>credit mangement solutions</span></li>
<li class="b"><span>third party additions</span></li>
</ul>
<div id="lcontent">
<div id="solutions" class="tab">
<h2>Title</h2>
Description
</div>
<div id="management" class="tab">
<h2>Title</h2>
Description
</div>
<div id="thirdparty" class="tab">
<h2>Title</h2>
Description
</div>
</div>
</div>
And the JQUERY (which also slides an image to the tab which is selected)
$('#leader #llist li').click(function() {
$('#leader #llist li').removeClass('current');
var thisTop = $(this).offset().top;
$('.pointer').animate( {'top': thisTop} );
$(this).addClass('current');
$('.tab').fadeOut();
});
The current tabs dont currently fadeout or fadein when the links in the list are clicked...any help would be appreciated.
Here is an example of what I think you are looking for.
http://jsbin.com/iceli4/edit
Hope this gets you started.
Bob