Issue with changing class names using javascript/jquery - javascript

I'm looking to change the background color of the currently clicked on tab in my navigation menu. Then when I click a different tab, I want the old one to change back to the original background color. I've seen this tons of places, but every tutorial I follow hasn't worked for me.
Here is the html code I have for the navigation. Basically, I want to change the class "member_nav" to "member_nav_clicked" and then back to "member_nav" when a different tab is clicked.
<div class="member_nav">
Nav 1
</div>
<div class="member_nav">
Nav 2
</div>
<div class="member_nav">
Nav 3
</div>
<div class="member_nav">
nav 4
</div>
<div class="member_nav">
Nav 5
</div>
I'm not going to include any of the javascript functions I've tried, since none of it was working.

Add an active class, then on a click event find the currently active element and remove the active class with $('.active').removeClass('active') after this set the active class to the clicked element $(this).addClass('active').
#adeneo's anwser in the comments is actually better.
$(this).addClass('active').siblings().removeClass('active');

To be honest, this is some jQuery 101... i suggest you read up on the basics. I set up a jsFiddle for you, and i hope you wont just copy paste it but also try to learn something from it.
You can find it here: http://jsfiddle.net/wUpYh/1/
The code:
$('a').on('click', function(){
$('.member_nav_clicked').removeClass('member_nav_clicked').addClass('member_nav');
$(this).closest('.member_nav').removeClass('member_nav').addClass('member_nav_clicked');
});
So what happens is, i remove the member_nav class and add the clicked class. The line above it will take care of the previous clicked item. When an element has the active class, it will be removed before asigning it to the new clicked element.
But to be honest, a nicer way of doing this, would be to assign an active class and leave the normal class as it is. Like this:
$('a').on('click', function(){
$('.member_nav_clicked').removeClass('member_nav_clicked');
$(this).closest('.member_nav').addClass('member_nav_clicked');
});

Related

I need help to open menu on click on a href link in html?

i have tried from last few days but unable to open megamenu on click of ahref link, after done some code checkup, i have found some hint in css, in that if i make visibility value to visible then megamenu shows otherwise not, i want that menu to be open only on click right now it's opening on hover event and below code to be executed only onclick of ahref tag
.menu-subs, .menu-column-4
{
visibility: hidden!important;
}
below is ref. screenshot for menu
menu-screen
You will need to include some JavaScript to your code. Here are some examples on how to use it.
<button onclick="myFunction()">Click me</button>
<element onclick="myScript">
object.onclick = function(){myScript};
object.addEventListener("click", myScript);
I would also recommend using technologies like bootsrap or angular to deal with menus and navigation bars. They make life easier and is good to know how to use them.
If you want to make it so that when you click something them menu is visible, you could use the onclick function in the href and toggle the visibility of the menu using css display: non or block.
HTML: you are creating a div with the css properties of that class and assigning it an id. you are also creating a link that will call the javascript function when clicked
<div class="menu-subs" id="menu">
// the menu
</div>
<h1 onclick="openMenu()">Open menu</h1>
CSS: the class which is not displayed currently
.menu-subs, .menu-column-4
{
display: none;
}
Javascript:
function openMneu(){
//get the menu element in the html
elem = document.getElementById("menu");
// set the styling of the menu to visible
elem.style.display = "block"; //or inline block depending on your other css
}
when openmenu is called by the clicking of the heading open link. You could also use element.addeventlistender, bit that would be a bit harder, so i suggest you try this.
This should work, lmk if it does
(this is my second stackoverflow answer :|)

Add class to link on scroll plus add same class on click

i need a little bit of help with this page: http://www.levelidiomes.com/new/ (on the part called Formaciò) i have this js
http://www.levelidiomes.com/new/wp-content/themes/Kronos-WP2/js/formacio.js
That is adding a class to the menu on the left (called nav.stickymeny) also is doing other stuff for this specific part.
So, i need to:
add the active class when scrolling over the section
add the active class to the clicked link
I don't know why is not working correctly please helps
It looks like the .js is fine. It's adding the 'active' class when it's supposed to.
adding this little bit of CSS worked for me:
.stickymeny .active {
color: #whatever;
}

Current menu item

I've been trying every single tutorial I found online and none seems to work for me.
I've got these buttons:
<a href='faq.php'><div class='button'>
<div class='button_top'>
</div>
<div class='button_bot'>
FAQ
</div></a>
http://jsfiddle.net/6G8bk/
and I'd like that the top of the button would stay highlighted if the page url is same as href of the button.
Ty for any answers in advance!
Here's the fixed jsfiddle with jquery I tried but still won't work: http://jsfiddle.net/6G8bk/4/
A few things:
In your jQuery, you're trying to select all <a> elements that have a parent class of button, and according to your HTML you do not have (the button class is a child of the <a> element).
The page's URL won't work in JSFiddle because it will get the JSFiddle link, which will be different from the one on your website.
Since you want button_top to be visible on hover, you'll need to use JavaScript. As fas as I know, you can't manipulate another element on hover with pure CSS.
Here is a working Fiddle of what I think you want. I've left comments in the code that might help you.
http://jsfiddle.net/6G8bk/6/
You can retrieve the current url page by using $_SERVER["SCRIPT_NAME"] and comparing it to each element of the menu.
If it match, you put another class in the menu element with CSS rules to have the layout you want.

changing dynamically the "onlink" id in css

I made a navigation bar as tabs in my website, and I used the onlink identity to specify the current tab with certain characteristics. My problem is that when I change tabs, I don't know how to make the previous tab id set as none and the current one set as onlink.
Here's the navigation bar code:
<div id="indNavBar">
<div id="indHolder">
<ul>
<li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd')" id="onlink">Single Indicator</a></li>
<li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');">Double Indicators</a></li>
</ul>
</div>
</div>
There's a simple ways but it's somehow stupid, which is to make each current tab as a whole page and when I click another tab, it's just given the url of clicked tab which goes to the page with specified onlink id, but this requires reloading the whole page that's why I'm seeking a better solution.
You can get the control being clicked by passing this in javascript method
onclick="DisplayDIV('IndPage', this);
function DisplayDIV(IndPage, sourceObj)
{
alert(sourceObj.id);
}
Are you ok do use the jQuery Library?
If so you can avoid putting inline javascript into your html and use toggleClass http://api.jquery.com/toggleClass/
You are trying to use HTML ids in the wrong way.
Ids are unique identifiers for HTML tags. They should not change at runtime.
Instead, apply CSS classes to the tab you want to be visible.
CSS
.hide {display:none;}
Javascript
var indpage = document.getElementById("IndPage");
if (!indpage.classList.contains("hide")) {
indpage.classList.add("hide");
}
Then your HTML at runtime will change to
<div id="IndPage" class="hide">...</div>
This is the standard approach.
And you can do much more with this idea.
I agree that making a tab a whole page is not a good idea. You can use javascript to apply CSS classes to hide and remove that class to show again.
Its also a good idea to learn how to separate your javascript from your HTML. Please read some more tutorials on this. One for instance: Unobtrusive Javascript
Here is a jquery way to do it: http://jsfiddle.net/surendraVsingh/HyAhL/
$('#indHolder a').click(function(){
$(this).attr('id', 'onlink');
$(this).parent().siblings().find('a').removeAttr('id');
});​
I took hints from the answers above and it worked as the following:
function putOnlink(x){
document.getElementById('onlink').id = "none";
$(x).attr('id','onlink');
}
and the tabs code is:
<div id="indNavBar">
<div id="indHolder">
<ul>
<li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd');putOnlink(this);" id="onlink">Single Indicator</a></li>
<li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');putOnlink(this);document.getElementById('onlink').id='none'">Double Indicators</a></li>
</ul>
</div>
</div>
I just wanna not that in the second link I had to change the id of the first link twice because it didn't work once, maybe cause its id is set in the tag not just when clicked.

Show hidden div with bookmarks

Basically I hide all of the answer divs on the page, but I want to show a div if the a user has clicked a bookmarked link to it.
Here's the javascript code
<script type="text/javascript">
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".faq_answer").hide();
//toggle the componenet with class msg_body
$(".faq_question").click(function(){
$(this).next(".faq_answer").slideToggle("normal");
});
});
</script>
The resulting HTML for the section is
<li>
<div class="faq_question">
Question
</div>
<div class="faq_answer">
<p>Text to show</p>
</div>
</li>
EDIT
The question was how do I do it...Figured it out though after the answers here.
window.location.hash will give you the value "#" in your URL. You can use that to build a selector.
// if visiting /index.php#item1
$(window.location.hash).show(); // $('#item1').show();
You can look for the #url-blah in the URL in javascript and display the corresponding section?
I would assume you would need to add a class to the div that hides it and shows it based on the click function
I dont really see a question here though
To accomplish this you are going to most likely need to change your document structure a bit, as you cannot reference any of the specific "faq_answer" items individually.
Typically what I would do here is use a specific ID for each of the answers, then you can use javascript with a show action to be able to toggle visibility.
For an example of my HTML and jQuery code, you can view this page, look at the version history section.

Categories