jquery make action when link menu item is clicked - javascript

I have three menu items here:
JSFIDDLE: FIDDLE LINK
<div class="home-content">
<div class="menu-bar">
<ul class="nav nav-tabs">
<li class="active">Blue<sup>beta</sup></li>
<li>Green<sup>beta</sup></li>
<li>Red</li>
</ul>
</div>
By default link blue is active.
I want whenever any link green or red is clicked, it should be active
Color of the label should be changed as per the link selected
I am facing trouble in this points.

You could add a DATA color on your li like that :
<li data-color="#0f0">Green<sup>beta</sup></li>
then use this code :
$(function () {
$(".menu-bar li a").click(function () {
$('.active').removeClass('active'); //Remove the current active item
var color = $(this).closest('li').addClass('active').data('color'); //add class the the target and save his data attribute
$("#l1").css("color", color); //Change color
});
});
Fiddle : http://jsfiddle.net/ZjgV4/6/

Something like this?
$(function () {
$(".menu-bar li a").click(function () {
$(".menu-bar li").removeClass("active");
$(this).parent().addClass("active");
});
});
http://jsfiddle.net/3mhCW/1/

Without completely doing everything, this should point you on the right track. A few things to note about your code - You should pass in the e event, to the click handler and use jQuery's e.preventDefault(); to stop the link. Also, you need to quote the value in the css function. .css("color", "red") otherwise you will get an undefined error that red is not defined. Instead of manipulating the css of the elements, I would use add/removeClass respectively and style the elements with css.
$(function () {
$(".menu-bar li a").click(function (e) {
e.preventDefault(); // stop the link from following the href
// remove the active class from everything
$(".active").removeClass("active");
// $(this).css("color", "red");
$(this).addClass("active");
});
});

I included the code here.
basically, i inserted the color name to a class each color has its own class and each LI has a global attribute data-* with the value of the color (the name of the class)
HTML:
add to all the li the attribute data-color="blue"
Add CSS:
.blue{
background-color:blue;
}
.green{
background-color:green;
}
.red{
background-color:red;
}
jQuery:
$(function () {
$(".menu-bar li a").click(function () {
$('.menu-bar li.active').removeClass('active');
$(this).parent().addClass('active');
$("#l1").attr('class',$('.menu-bar li.active').attr('data-color'));
});
});

Related

toggle active on nav-tabs

$('.active').click(function() {
$(this).toggleClass('active');
$(this).toggleClass('active');
});
I know this is totally wrong but I'm new and trying to learn; What I'm trying to do is toggle the active class for the <li> onclick() really appreciate any help. Thankyou.
<ul class="nav nav-tabs">
<li role="presentation" onclick="toggleClass();">Hi</li>
</ul>
You need to create a function toggleClass
JS
Create a new function toggleClass which will accept the current clicked element
function toggleClass(elem) {
$(elem).toggleClass('active');
};
HTML
add toggleClass function to onclick handler & pass the current element as an argument
<li role="presentation" onclick="toggleClass(this);">Hi</li>
CSS
Create a class .active
.active {
background: yellow;
}
DEMO
What you need to do is set all other elements's classes to inactive,
$('.active').className = 'inactive';
$(this).className = 'active';
That top expression will affect all elements with the class and the bottom one will change the current clicked element.
try this:
$("nav li").click(function() {
$(this).toggleClass("active");
});
if only for <li> elements with active class
$("nav li.active").click(function() {
$(this).toggleClass("active");
});
This is not how Bootstrap is supposed to work. If you are using bootstrap, use their tab js component. more on it here
Basically you add a listener on those LI tags like this: (from the docs)
$('.nav.nav-tabs li').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
The way you did, you were toggling the state twice so in the end it would stay the same.
I think instead of $('.active').click(function()), you should target li click as
$( "li" ).click(function() {
$(this).toggleClass("active");
});
fiddle:
http://jsfiddle.net/wVVbT/142/
Here is a link for description about how to use .toggleClass.
toggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
DEMO:
$('li').click(function() {
$(this).toggleClass('active');
})
ul li{
float: left;
margin-right: 20px;
}
.active {
background: #69a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li> Link A</li>
<li>Link B</li>
</ul>

addClass and removeCLass in JS with loading content

I have problem with addClass and removeCLass in JS. I would like to do sth like that:
But I have a content div where I load files in PHP. But when I load sth the script resets and first li is selected. Scheme:
I click on Events, it gets new class and the content is load. Now when I click events, page loads and I see the content but class in first li.
How to change it?
EDIT:
OK guys I change code but it still doesn't work as I want. When I chenge "#" in links to url, the page loads as new and I lost this JS. (It starts again).
CODE:
$(document).ready(function () {
$("#MB1").click(function () {
$(this).addClass("active");
$("#MB2").removeClass("active");
$("#MB3").removeClass("active");
$("#MB4").removeClass("active");
});
});
$(document).ready(function () {
$("#MB2").click(function () {
$(this).addClass("active");
$("#MB1").removeClass("active");
$("#MB3").removeClass("active");
$("#MB4").removeClass("active");
});
});
$(document).ready(function () {
$("#MB3").click(function () {
$(this).addClass("active");
$("#MB1").removeClass("active");
$("#MB2").removeClass("active");
$("#MB4").removeClass("active");
});
});
$(document).ready(function () {
$("#MB4").click(function () {
$(this).addClass("active");
$("#MB1").removeClass("active");
$("#MB2").removeClass("active");
$("#MB3").removeClass("active");
});
});
#menu-div ul{
list-style-type:none;
}
.button a{
text-decoration: none;
color:green;
}
.button a:hover{
color: red;
}
.button.active a{
text-decoration: underline;
}
<div id="menu-div">
<ul>
<li id="MB1" class="button active">Home</li>
<li id="MB2" class="button">Projects</li>
<li id="MB3" class="button">About Us</li>
<li id="MB4" class="button">Contact</li>
</ul>
</div>
What happens when you assign the click action using
$('#menu li a').on('click', function(){
$('li a.current').removeClass('current');
$(this).addClass('current');
});
is that only the existing objects receive the event-handler.
You want to use something like this instead:
$("body").on('click', '#menu li a', function(){
$('li a.current').removeClass('current');
$(this).addClass('current');
});
By making body the target, even if the data loads after the script, the event-handler will be set.
In addition, any subsequent changes to the menu won't require you to reset the event handler.
EDIT
Per the changes to your example code:
When you have <a href="#" and so on, pressing the link does not make you leave the page.
You changed some of the links to <a href="?something" and so on. Clicking this link, the whole page is reloaded with the new querystring.
Are the links supposed to get data asynchronously?
If YES, you should return the jquery to the way it was... and use my answer above instead of the one you used of $(document).ready({[...].
If NO, I would suggest that you use PHP to make sure that the correct menu item is set to active.
Something along the lines of (I don't actually know php... this code may be completely off):
<a href="?whatever" class="button <?php if(request.querystring = "whatever") echo "active"; ?>
<a href="?something" class="button <?php if(request.querystring = "something") echo "active"; ?>

Change class name of anchor tab inside list

I have a small query.
<ul class="navigation">
<li>Home<span class="ui_icon home"></span></li>
<li>About Us<span class="ui_icon aboutus"></span></li>
<li>Services<span class="ui_icon services"></span></li>
<li>Gallery<span class="ui_icon gallery"></span></li>
<li>Contact Us<span class="ui_icon contactus"></span></li>
</ul>
this code I got from internet, it's like on click only the page scrolls to the next content.
and the selected list item updates itself. But when I try to implement this template in my Asp.net masterpage, the list items does not get updated. so what can I do?
Any suggestion?
below is the CSS default provided by the template
ul.navigation a:hover, ul.navigation a.selected {
color: #201f1b;
background: url(../images/templatemo_menu_hover.png) no-repeat left;
}
If you want to set the class selected to the clicked anchor and remove it from other anchor, then use:
$('.navigation li a').click(function(e) {
e.preventDefault();
$('.navigation li a').removeClass('selected');
$(this).addClass('selected');
})
Fiddle Demo
If you want to use the 'on click' function to remove and add the class on elements, try the code below:
$(".navigation li a").on("click", function (event) {
//prevents the browser from going to a new URL
event.preventDefault();
//removes selected class from all elements
$('.navigation li a').removeClass('selected');
//adds selected class to element you click
$(this).addClass('selected');
});
I do not have access to your image so I used the background-color parameter in the css
jsfiddle example: http://jsfiddle.net/9Jjud/

Pick <li> from div1, on button click, move to div2

I know this is going to be an easy thing to do for someone with javascript experience, but I'm drawing a blank.
I have a list of items:
<div id="left-side">
<ul>
<li><div>Item 1</div></li>
<li><div>Item 2</div></li>
</ul>
</div>
<input id="addElement" type="button" value="->"/>
<div id="right-side">
</div>
I would like to highlight(change the background color) the selected list item on the left and then on a click of the button, move the selected item to the right div, and finally changing the background color back.
I've seen this many, many times online. But can't for the life of me, come up with how to do it.
Something like this (jquery) should do the trick:
// make the items selectable by toogling an 'active' class
$('#left-side li').click(function() {
$(this).toggleClass('active');
});
// on click of the move button
$('#addElement').click(function() {
// get the items to move
var $items = $('#left-side li.active');
// remove their active state
$items.removeClass('active');
// append them to the right side list
$('#right-side ul').append($items);
});
As you can see the code is indeed pretty straigh forward.
I also set up a small example to demonstrate: http://jsfiddle.net/NbcS9/
edit:
If you only want to be able to only select a single item on the left, you could do something like this in stead:
// make the items selectable by toogling an 'active' class
$('#left-side li').click(function () {
// remove active class from all other items
$('#left-side li').not($(this)).removeClass('active');
// toggle the active class on the clicked item
$(this).toggleClass('active');
});
And the updated fiddle:
http://jsfiddle.net/NbcS9/1/
I'd start by adding an empty <ul></ul> to your right side div, then use this:
$('#left-side li').click(function () {
$(this).toggleClass('selected');
});
$('#addElement').click(function () {
$('#left-side li.selected').appendTo($('#right-side ul'));
});
jsFiddle example
You may try this
$(function(){
$('#left-side ul li').on('click', function(){
$(this).toggleClass('selected');
});
$('#addElement').on('click', function(){
$('#left-side ul li.selected').appendTo($('#right-side ul'));
});
});
DEMO.
Using pure JavaScript would be tricky to do this, but using JQuery you can do this sort of easily. Add click events to the two divs which would append the selected text of the other to itself. to get the selected data add a function like this:
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
Also, I would look into Jquery Draggable(). sounds like something that could relate to your desired end result. http://jqueryui.com/draggable/
css:
.highlighted { background: yellow; }
html:
<div id="left-side">
<ul>
<li><div>Item 1</div></li>
<li><div>Item 2</div></li>
</ul>
</div>
<input id="addElement" type="button" value="->"/>
<div id="right-side">
<ul></ul>
</div>
JS:
$('#left-side').find('li').on('click', function(event) {
$(this)
.siblings().removeClass('highlighted')
.end()
.addClass('highlighted');
});
$('#addElement').on('click', function(event) {
event.preventDefault();
$('#left-side').find('li.highlighted').appendTo('#right-side ul'));
});

remove class of group of links once another link is clicked

These group of links are my nav elements. var make_button_active removes and inserts class active once clicked into the link. With CSS, class active assigns an orange color to the text of the link. I have another link which is outside of this group. Its a logo as link which goes to #home. I would like that once this is clicked the class active is removed from the links inside the ul.menu. This way the nav elements wont remain colored in orange when #home is clicked. I've tried it alone but I'm a beginner with javascript.
Could you help me with this quest?
HTML:
<nav>
<div id="logo">
<img src="_img/logo.png" alt="DR logo" />
</div>
<div id="categories">
<ul class="menu">
<li>ABOUT ME</li>
<li>SHOWCASE</li>
<li>HOW DO I WORK</li>
<li>LETS MEET</li>
</ul>
</div>
<hr>
</nav>
CSS:
.menu li.active a {
color: #ff530d;
}​
JQUERY:
<script type="text/javascript">
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
);
//Add the clicked button class
$(this).addClass('active');
}
var classOut = function()
{
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
</script>
I rewrote your entire JavaScript, does this help?
I changed your JavaScript to:
$(document).ready(function()
{
$('.menu a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
$(this).addClass('active');
});
$('#logo > a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
});
});
​
At first: jQuery !== JavaScript
Also, #home wont select your home link, because it does not select the href, but the id.
Use instead $("#logo a").click(classOut);
Also, your function make_button_active should look something like this:
var make_button_active = function() {
$('.active').removeClass('active');
$(this).addClass('active');
}
You don't need to iterate over all the siblings, your active can only be on one element at once, you can just select this and remove the class before setting it on the newly selected element.
Finally, you do not necessarily have to do a function expression var make_button_active = function(){...}, a function declaration is completely okay in your case: function make_button_active(){...}. However, often it is good to use function, and not like Sam did using anonymous functions, because you can then reuse those functions easily.
Your entire script should look like this:
<script type="text/javascript">
function make_button_active(){
$('.active').removeClass('active');
$(this).addClass('active');
}
function classOut(){
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#logo a").click(classOut);
});
</script>
There is no element with ID of home in your markup:
<img src="_img/logo.png" alt="DR logo" />
You are using ID selector and your selector doesn't select the element with #home href attribute. You can add ID to your element or use attribute selector:
$("a[href='#home']").click(classOut);
Also you don't need to use each method:
var make_button_active = function() {
$(this).addClass('active').siblings().removeClass('active')
}
var classOut = function() {
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
http://jsfiddle.net/hJdXU/

Categories

Resources