How to select a <div> on a particular tab clicked? - javascript

I am designing a tabs of my own for tab navigation I used google api and jquery.
Here my fiddle,
http://jsfiddle.net/raghavendram040/fk7y2d5L/2/
but in fiddle i didnt add google api link.
Here is my js code
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
$("header ul li a").click(function(e) {
e.preventDefault();
$("header ul li a").each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
var tabtitle=$(this).attr("title");
$.show('#tab'+tabtitle);
});
});
Here I am trying is on click of each tag i am trying to display respective div tag. But I cant able to do it. can any one help me in this.

Try this : You don't need google api for this. Just include jquery library in your html page as shown below. Put your code inside $(function(){..}); which will ensure that script applies after loading whole DOM structure.
For more information on jQuery visit - JQuery.com
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$(function()
{
// Just for demonstration purposes, change the contents/active state using jQuery
$("header ul li a").click(function(e) {
e.preventDefault();
// remove active class from all tabs
$("header ul li a").removeClass("active");
// hide all tab div
$('div[id^="tab"]').hide();
//add active class to clicked tab
$(this).addClass("active");
// show clicked tab content div
var tabtitle=$(this).attr("title");
$('#tab'+tabtitle).show();
});
});
Demo

JSFiddle: http://jsfiddle.net/TrueBlueAussie/fk7y2d5L/11/
$(function () {
// Just for demonstration purposes, change the contents/active state using jQuery
$("header ul li a").click(function (e) {
e.preventDefault();
// Remove the active class from any anchors that have it
$("header ul li a.active").removeClass("active");
// Add active to the selected anchor
$(this).addClass("active");
var tabtitle = $(this).attr("title");
// Hide all divs that start with id=tab
$('#main div[id^=tab]').hide();
// Show the selected div
$('#tab' + tabtitle).show();
});
// initial hide of all tabs
$('#main div[id^=tab]').hide();
// Trigger initial selection
$('header a.active').trigger('click');
});

First of all you need to hide the tabs, lets say that you do so by adding a class tab for all corresponding <div>'s along with the following css
.tab {
display:none;
}
Then set the initially active tab as visible by applying the class visible given below to it.
div.tab.visible {
display:block;
}
Now you can use the following JS to make it work:
$("header ul li a").click(function (e) {
e.preventDefault();
$(".active").removeClass("active"); // you don't need to iterate over using each
$(this).addClass("active");
var tabtitle = $(this).attr("title");
$("#main div.tab.visible").removeClass("visible"); // hide actve tab
$('#tab' + tabtitle).addClass("visible"); // show selected tab
});
Updated Fiddle
Side note: I added the missing tab blog and added the corresponding text for the demo

Firstly. No need for anything other than just jQuery.
Secondly: Personally, I would default all the tabs to being hidden, and only showing them when the "active" class is on them.
Also, you might want to add some actual class names to the tabs and the tab-content so you have better control. ".tab" for the tabs, and ".tab-content" for the content.
The javascript code is then fairly simple and understandable:
$(function()
{
$(".tab").click(function(e) {
e.preventDefault();
$(".tab.active, .tab-content.active").removeClass("active");
$(this).addClass("active");
var tabtitle = $(this).attr("title");
$('#tab'+tabtitle).addClass("active");
});
});
JSFiddle with new class names

Related

Using javascript to set a class to a LI element

I have a page with the following menu:
https://jsfiddle.net/dva4zo8t/
Based on which menu button is clicked, the color changes and I can "remember" (set) the color on a new page load:
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
I also want to "remember" (set) the submenu link (so when I click "Add Appointment" and the appropriate page loads, it needs to stay highlighted like this:
So what I basically want is to change the class of the sub li just as I do with the main buttons, for example:
$('#redbutton').addClass('topmenu-selectedred');
$('.topmenu-tab-appointments').show();
Any pointers will be very welcome!
I try to answere your question. I have created fiddle.
I added following method in your code.
$('ul > li > a').click(function() {
if(!$(this).hasClass("parent")) {
$(this).css('color','red');
$(this).parent().siblings().children().css('color','black');
}
});
Link for Fiddle

Toggling show/hide anchored divs

I have a list of Services with their respective descriptions, which I have linked to with anchor links.
The service details are hidden until I click on a service name. I am not being able to hide the previously clicked on services, they are overlapping.
This is a JSFiddle of what I have been able to put together so far:
https://jsfiddle.net/rdhn60mb/
$('#home-header .service-box li a').click(function() {
$($(this).attr('href')).css('display', 'block');
});
/*
$("#home-header .service-box li a").click(function(){
var $name = $(this).text();
var $activebox = ($("#" + $name).length === 0) ;
$("#home-header .service-details").not($activebox).hide();
$("#home-header .service-details").not($activebox).removeClass('active');
$activebox.toggle();
$activebox.toggleClass('active');
});
*/
(The commented out code doesn't work, but it's close to what I'm trying to achieve).
Thank you all for helping me out!
Cintia
I would agree with divy3993's answer but improve it slightly:
$('#home-header .service-box li a').click(function() {
$('.service-details').hide();
$($(this).attr('href')).toggle();
});
The toggle is just a more efficient function in this case.
You can see the example in this Fiddle: https://jsfiddle.net/rockmandew/rdhn60mb/6/
See in your case it's overlapping, as you never close/hide them. So as JavaScript/JQuery runs line by line. We will first close/hide all of them $('.service-details').hide(); onclick and then open/show only the current one.
JQuery
$('#home-header .service-box li a').click(function() {
$('.service-details').hide();
$($(this).attr('href')).css('display', 'block');
});
UPDATE :
Fiddle : Demo
Note: Here in demo i used fadeIn() so it has some smoothing effect. Also using anything else like toggle() is useless. As you are hiding all the service-details before showing so no need of toggle().
To close the div again if the same link is clicked like you wanted.. simple wrap it in an if statment checking if the current active tab has the same id as the href value. If so don't run the show
//if the clicked a element's href is not the same as the active elements id
if( $(this).attr('href') != "#"+$(".active").attr( "id" ) ) {
//remove the current active class
$('.service-details').removeClass( "active" );
//fade in the div
$($(this).attr('href')).fadeIn();
//add the class active to the div
$($(this).attr('href')).addClass( "active" );
}
Here is a jsfiddle with the edits and I also added a fadeout to make it less jumpy
https://jsfiddle.net/rdhn60mb/21/

How can I edit this jquery code to open a menu automatically on page load?

I'm using a nav.js that I found on the web and would like to add some javascript to it to enable a menu to be automatically opened when the page loads. I'm not too good with js, I tried adding the class "open" to one of my catagories but it didn't seem to do anything. I suspect I need to copy the existing code, add something about it being exectuted on page load and then adding "open" would work.
This is my js
$(document).ready(function(){
$("#nav > li > a").on("click", function(e){
if($(this).parent().has("ul")) {
e.preventDefault();
}
if(!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
$("#nav li ul").slideUp(350);
$("#nav li a").removeClass("open");
// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("open");
} else if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(350);
}
});
});
Can anyone help?
$("#nav").find("li").has("ul").first().find('> a').click();
// ^ -- more efficient to select by ID then filter
// ^ -- filter for submenu items only
// ^ -- only need the first one
// ^ -- find the link
// ^ -- trigger the click
You can trigger the click handler programmatically.
Add this after your existing code (but within the ready handler)
Trigger click event on that menu item.
Put this inside document.ready
$("#nav > li > a#yourID").trigger('click');
You can call this inside document ready
$("#nav > li > a").addClass("open").next("ul").slideDown(350);

Simple issue with jQuery Accordion

I have a simple jQuery accordion which works... almost perfectly :)
As you can see from the demo, I currently have the navigation "open" as I'm in the "Team" page.
Is it possible when I click 'About Us', it closes the element altogether. As you can see from the demo it closes it, but then quickly re-opens it. I guess this occurs because of the code on line 27 of my CSS.
Here is my demo: http://jsfiddle.net/URYzK/5/
Here is my JavaScript:
jQuery(function($) {
$('#accordion > li > a').click(function (e) {
if ($(this).next('ul').length == 0) {
// link is for navigation, do not set up accordion here
return;
}
// link is for accordion pane
//remove all the "Over" class, so that the arrow reset to default
$('#accordion > li > a').not(this).each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
$(this).siblings('ul').slideUp("slow");
});
//showhide the selected submenu
$(this).siblings('ul').slideToggle("slow");
//addremove Over class, so that the arrow pointing downup
$(this).toggleClass($(this).attr('rel') + 'Over');
e.preventDefault();
});
});
Many thanks for any help here.
Remove display:none from #accordian ul and remove the .children CSS entirely. I believe this creates the behavior you want. You were setting the children ul to be display:none, and then trying to force .children, which is a ul, to be display:block later, which is why they were fighting.
Updated your jsFiddle as well.

slide navigation

I'm trying to make slide navigation. Here is my code
html
<li>
Services
<div class="subcategories">
Cleaning
</div>
</li>
The subcategories div is hidden.
js
$('li a').hover(function() {
$(this).next().slideToggle('fast', function() {
});
});
This code works. The problem is that when the mouse goes out of the li a the subcategories div disappears.
What i want is that when the user point the li a the subcategories div to be shown so the user be able to click on some link of the sub navigation.
Try this please Demo http://jsfiddle.net/QEkDa/ or http://jsfiddle.net/qmrHm/
Please let me know if I missed anything!
Hope rest fits the cause :)
code
$(".subcategories").hide();
$('li a').mouseover(function() {
$(this).next().slideToggle('fast', function() { // <== could use slideDown
}).mouseout(function() {
$(".subcategories").slideUp();
});
});​​
You use a:first
$('li a:first').hover(function() {
$(this).next().slideToggle('fast', function() {
});
});
$('li').hover(function(){
$(this).children('.subcategories').slideToggle('fast', function(){});
});
Try this, you need to put the hover action on li, or when you mouse over the div it will hide, because you are now on the div, not on the anymore.
With children() you select the action for the nodes that are class "subcategories" under that li, but you are still on li, so it won't hide

Categories