I am using the following tabs in a project :
//Tabs
$('ul.tabs').each(function(){
var $active, $content, $links = $(this).find('a');
$active = $links.first().addClass('active');
$content = $($active.attr('href'));
$links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function(e){
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
e.preventDefault();
});
}); //End Tabs
and the HTML is as follows:
<ul class='tabs'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'></div>
<div id='tab2'></div>
<div id='tab3'></div>
The problem I am having is that I want to run a function within the active tab, and then automatically select another tab where the results of the previously executed code will appear.
I am unsure how to go about simulating a click in order to automatically select the next tab, so any help will be greatly appreciated!
Thanks in advance.
A simple way to simulate a click, is using .trigger()
$("#tab2").trigger("click"); //when you need in the function
Related
I'm loading data from a PHP page with JQuery and it works fine. Now I want that when I click on one of these loaded elements an alert shows the id of the selected element. How can I do? Because I want to send the if later on using ajax. I tried this code, but it didn't work.
HTML
<li><strong>CATEGORY</strong><span> MENU ELEMENTS</span>
<ul class="sub-menu">
<li><a id="id_1" data-target='post_category'>Sub_1</a></li>
<li><a id="id_2" data-target='post_category'>Sub_2</a></li>
<li><a id="id_3" data-target='post_category'>Sub_3</a></li>
<li><a id="id_4" data-target='post_category'>Sub_4</a></li>
<li><a id="id_5" data-target='post_category'>Sub_5</a></li>
<li><a id="id_6" data-target='post_category'>Sub_6</a></li>
<li><a id="id_7" data-target='post_category'>Sub_7</a></li>
<ul>
</li>
JQuery
<script>
$(document).on("click", "a", function() {
alert('worked!');
});
</script>
sending data code
$(document).on("click","a",function(e){
$.ajax({
type: "POST",
data: "id=" + $(this).attr("id"),
url: "post_category.php"
});
});
as I wrote that the alert didn't appear which mean click event in JQuery code doesn't work for some reason.
Thank you for your tips I tried them all, but the found the cause of the problem it's from the script that loading the page using ajax.
<script>
$(document).ready(function(){
//set trigger and container
var trigger = $('#nav ul li a'),
container = $('#container');
//do on click
trigger.on('click', function(e){
/***********/
e.preventDefault();
//get the link location that was clicked
pageurl = $(this).attr('href');
//to change the browser URL to th if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl+'.php');
/* reload content without refresh */
//set loading img
$('#container').append('<div id = "loading">WAIT... <img src = "img/ajax-loader-small.gif" alt="Currently loading" /></div>');
//change img location to center
$("#loading").css({"position": "absolute", "left": "50%", "top": "50%"});
//get the trigger to reload the contents
var $this = $(this),
target = $this.data('target');
container.load(target + '.php');
return false;
});
});
// fix url in the browser when click on backward and foreword arrows
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=tab',success: function(data){
$('#container').html(data);
}});
});
</script>
I really don't know which part that cause this problem. Please help/
I think the probelm is with your identification of which element is clicked. I would do it this way: First, in your html move the id to the li element
<ul>
<li><strong>CATEGORY</strong> MENU ELEMENTS
<ul class="sub-menu">
<li id="id_1"><a data-target="post_category"></a>Sub_1</li>
<li id="id_2"><a data-target="post_category"></a>Sub_2</li>
<li id="id_3"><a data-target="post_category"></a>Sub_3</li>
<li id="id_4"><a data-target="post_category"></a>Sub_4</li>
<li id="id_5"><a data-target="post_category"></a>Sub_5</li>
<li id="id_6"><a data-target="post_category"></a>Sub_6</li>
<li id="id_7"><a data-target="post_category"></a>Sub_7</li>
</ul>
</li>
</ul>
You should then be able to get the id with:
jQuery("#container-fluid > section > div > div.box-body > ul > li > ul").children().on("click", function() {
alert('worked!');
alert(this.id);
});
Try below code. It's working fine.
<li><strong>CATEGORY</strong><span> MENU ELEMENTS</span>
<ul class="sub-menu">
<li><a id="id_1" class="abc" data-id="id_1" data-target='post_category'>Sub_1</a></li>
<li><a id="id_2" class="abc" data-id="id_2" data-target='post_category'>Sub_2</a></li>
<li><a id="id_3" class="abc" data-id="id_3" data-target='post_category'>Sub_3</a></li>
<li><a id="id_4" class="abc" data-id="id_4" data-target='post_category'>Sub_4</a></li>
<li><a id="id_5" class="abc" data-id="id_5" data-target='post_category'>Sub_5</a></li>
<li><a id="id_6" class="abc" data-id="id_6" data-target='post_category'>Sub_6</a></li>
<li><a id="id_7" class="abc" data-id="id_7" data-target='post_category'>Sub_7</a></li>
<ul>
</li>
<script type="text/javascript">
$(".abc").click(function () {
var id_value = $(this).data('id');
alert(id_value);
});
</script>
I believe you are setting up click events before the links are added to the dom. Ajax calls are a little bit different than the regular functions. They don't block your code so when you do an ajax call, javascript calls the function and doesn't wait for the response. It goes and implements the rest of the functions.
Simpler version of your function
$.get(url, function (data) {
// success -> Usually just calling your function here solves the problem.
}).done(function () {
setupClickListener(); // If it doesn't append this to it for extra security.
});
function setupClickListener(){
$(document).on("click", "a", function() {
alert('worked!');
});
}
The problem is return false in the loading receipt.
I removed return false and kept e.preventDefault(); so it will do the same thing.
need help with active class.
i use this code to create simple tabs. all works fine.
but i can't get this code to work with "active class" as i need.
the code now select the first tab and make him active.
i want to add by myself the active class code to the div like:
need help to make this work.
Thanks
<ul class='tabs'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
<p>Hi, this is the first tab.</p>
</div>
<div id='tab2' class='active'>
<p>This is the 2nd tab.</p>
</div>
<div id='tab3'>
<p>And this is the 3rd tab.</p>
</div>
and here is the JS code. the problem as i see in the "$active"
jQuery(document).ready(function($) {
$('.info-tabs').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active[0].hash);
// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
});
In your each loop, you are iterating using a selector .info-tabs
$('.info-tabs').each( //some stuff here )
But i dnt see any info-tabs class anywhere.
So check your html content first.
how do i keep selected tab active after page reload or refresh i have working on drop line navigation menu
function is working fine for parent ul li and also parent active when click on parent link
but problem is that when i click on sub menu link and redirect to another page then clicked parent ul li didn't active and every-time Home Tab active or highlight whenever page refresh or redirect to another page
for example i want like this
Account Menu is parent menu and child menu like user profile and user accounts
when i click user profile or user accounts script should active or highlight
Account Menu Tab Not Home Tab
Here Javascript
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function () {
$("li:first-child").addClass("active");
$('li').click(function () {
$('.secondary li').removeClass('active');
$(this).addClass('active');
});
})
});//]]>
</script>
Html Code
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li >Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Payments Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Request Money
<ul>
<li>Manage Invoices</li>
<li><a href="" >Request Money</a></li>
<li><a href="" >Create Invoice</a></li>
<li><a href="" >Invoice Settings</a></li>
</ul>
</li>
<li><a href="#" >Merchant Services</a></li>
<li><a href="#" >Products & Services</a></li>
</ul>
</div>
Updated Javascript but not working
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$(document).ready(function () {
var index = Cookies.get('active');
$('.secondary').find('a').removeClass('active');
$(".secondary").find('a').eq(index).addClass('active');
$('.secondary').on('click', 'li a', function (e) {
e.preventDefault();
$('.secondary').find('a').removeClass('active');
$(this).addClass('active');
Cookies.set('active', $('.clearfix a').index(this));
});
});
}//]]>
</script>
You will definitely store somewhere the data, wich was the last active tab. If you want to do this on client side only, one solution can be the cookies. See here: How do I set/unset cookie with jQuery?
If you are using HTML5, then you can use web storage. See here.
If you are rendering your page by PHP, you can use $_SESSION variable for this. When user clicks a tab, you make an ajax request, and store the value of the active tab in a $_SESSION variable, but as i see, you want to do it on the client side.
UPDATE
Ok, i just created it for you.
First thing is to set an id for every a element in my example, to know, wich is that. You can do it some other way, but now this is the most simple.
Second is to download the jquery.cookie.js, and do not use the URL, store it locally.
Third, here could be a problem, if cookies are disabled on the client machine.
You need to do something like this:
HTML
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li>Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
</ul>
</li>
</ul>
</div>
CSS
.active {font-weight: bold; color: #F00}
JQUERY
ok, stacoverflow does not allow me to paste here a code but i loaded here the
https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js script also!
<script type='text/javascript'>
$(function() {
//$.removeCookie("active");
var activeMenu = $.cookie("active");
console.log(activeMenu);
if (typeof activeMenu === 'undefined') {
$("#home").addClass("active");
} else {
$('#' + activeMenu).addClass('active');
}
$('li a').click(function(e) {
e.preventDefault();
var listItems = $("#navPrimary li a");
listItems.each(function(idx, li) {
$(li).removeClass('active');
});
$(this).addClass('active');
var id = $(this).attr('id');
$.cookie("active", id);
});
})
</script>
I have this code, and eberything works fine, and also add the active class like I want.
However, it's possible when i click on href='#tab58', add active in the first three classes at once?
If I click in <a class="section_010" href='#tab58'></a>
I Want to add active in this first class at once
<a class="section_010 active" href='#tab58'></a>
<a class="section_011 active" href='#tab58'></a>
<a class="section_012 active" href='#tab58'></a>
If I click on another href, work fine (only that item add active class)
Code EXAMPLE Here
$(document).ready(function () {
$('ul.prov').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));
// Hide the remaining content
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $($(this).attr('href'));
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
</script>
<ul class="prov">
<a class="section_010" href='#tab58'></a>
<a class="section_011" href='#tab58'></a>
<a class="section_012" href='#tab58'></a>
<a class="section_02" href='#tab60'></a>
<a class="section_03" href='#tab61'></a>
<a class="section_04" href='#tab62'></a>
<a class="section_05" href='#tab63'></a>
<a class="section_06" href='#tab64'></a>
<a class="section_07" href='#tab65'></a>
</ul>
<div class="mapa_legenda">
<div id='tab58'> TEXT1</div>
<div id='tab60'> TEXT2</div>
<div id='tab61'> TEXT3</div>
<div id='tab62'> TEXT4</div>
<div id='tab63'> TEXT4</div>
<div id='tab64'> TEXT4</div>
<div id='tab65'> TEXT4</div>
</div>
I update this code My Updated code
It's possible, when I click in "About MHG", "Workout Programs" OR "Fitness Tips". All of them , stay active at once. (you click in one of them, and all 3 stay active).
I only want that for "About MHG", "Workout Programs" OR "Fitness Tips"
Anyone could help me please?
<ul class="navi">
<li><a class="menu2" href="#">About MHG</a></li>
<li><a class="menu3" href="#">Workout Programs</a></li>
<li><a class="menu4" href="#">Fitness Tips</a></li>
<li><a class="menu5" href="#">Contact Us</a></li>
<li><a class="menu6" href="#">Read Our Blog</a></li>
</ul>
It's simple.
Please check
http://jsfiddle.net/9nd4j/1282/
Just add this part:
$(this).closest('ul').find('li a').each(function(i){
if (i<3)$(this).addClass('active');
});
Check this example, that I edit
I add active class, on both 3 first itens like you want.
Just using:
$('a.menu').click(function(){
$('a.menu').removeClass("active");
$('a.menu2').removeClass("active");
$(this).addClass("active");
});
$('a.menu2').click(function(){
$('a.menu2').removeClass("active");
$('a.menu').removeClass("active");
$('a.menu2').addClass("active");
});
Please check:
http://jsfiddle.net/9nd4j/1264/
I have created multiple top down menu items. When the links are clicked a div slides down to show some content.
What I am trying to do with these links is toggle between them. When one div is opened an active state is added to the link, when it is closed the active state is removed and the div hidden. When you click between the links I have managed to get them to toggle between each other and the active state is added to the div that is opened.
What I cannot achieve is removing the active state and resetting some css.
Here is my Javascript:
//menu toggle
$(".trigger").click(function() {
var divToToggle = $( $(this).data('target') );
$(".toggle:visible").not(divToToggle).hide();
$(".trigger").not(divToToggle).removeClass('active');
$('.top-nav').css('margin-top', '20px');
divToToggle.slideToggle("fast", "linear");
$(this).toggleClass('active');
$('.top-nav').css('margin-top', '0px');
return false;
});
The .toggle class is on all the divs that are toggled:
<div class="account-container toggle hide"></div>
<div class="collections-container toggle hide"></div>
<div class="search-container toggle hide"></div>
The .trigger class is on all my links:
<ul class="top-nav">
<li><a class="hidden-tablet" href="">home </a></li>
<li><a class="hidden-tablet" href="">about us </a></li>
<li><a class="hidden-tablet" href="">where to buy </a></li>
<li><a class="hidden-tablet" href="">contact us </a></li>
<li class="tablet-menu visible-tablet"><a class="tablet-menu trigger" href="" data-target=".tablet-menu-container">tablet menu</a></li>
<li class="account"><a class="account trigger" href="" data-target=".account-container">account</a></li>
<li class="collection"><a class="collection trigger" href="" data-target=".collections-container">collections</a></li>
<li class="search"><a class="search trigger" href="" data-target=".search-container">search</a></li>
<li class="basket"><a class="basket trigger" href="" data-target=".home-basket-container">basket</a></li>
</ul>
It's hard to say where exactly your code is going wrong, but I've re-written it so it works slightly differently. Your click handler has to handle two possibilities: either we're clicking to hide an existing section, or we're clicking to switch to a new section. But we can also think of this as being two steps, with the second one optional: either we hide an existing section, or we hide an existing section and show a new one.
I've also switched to using ev.preventDefault() to stop the link from firing, named the jQuery variables so they start with $ (which makes them easier to differentiate). You can try it out on jsfiddle here.
$(document).ready(function () {
$(".trigger").click(function (ev) {
ev.preventDefault();
var $clickedLink = $(this);
var $divToToggle = $($(this).data('target'));
var isHideOnly = $clickedLink.hasClass('active');
// Hide the existing div and remove 'active' class.
$(".toggle:visible").hide();
$(".trigger").removeClass('active');
$('.top-nav').css('margin-top', '20px');
// If we're showing a new one, reveal it and set the active class on the link.
if (!isHideOnly) {
$divToToggle.slideToggle("fast", "linear");
$('.top-nav').css('margin-top', '0');
$clickedLink.addClass('active');
}
});
});