Is it possible to add "active" or "inactive" on a menu that uses scrollTo to indicate if the visitor have selected that menu option or not.
Like:
<ul>
<li>Target 1</li>
<li>Target 2</li> <-- selected.
<li>Target 3</li>
...
</ul>
you can do it like this i have given your ul an id menu
$('#menu li a').hover(
function () {
$(this).addClass('active').removeClass('inactive');
},
function () {
$(this).addClass('inactive').removeClass('active');
}
);
Live Demo OnHover
if you want to do it on click use this
$('#menu li a').click(
function () {
$(this).addClass('active').removeClass('inactive');
$('#menu li a').not(this).addClass('inactive').removeClass('active');
}
);
Live Demo OnClick
Yes you can add the "active" or "inactive" to your class when the link is clicked. On the onclick event of the links, you can use Jquery .addClass() function to add the "active" class and use .removeClass() to remove the "inactive" class
Related
below is my jquery code for a dropdown menu :
$(function(){
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(".menu").toggle();
});
var ww = document.body.clientWidth;
if (ww < 1000) {
$(".toggleMenu").css("display", "inline-block");
$(".menu").hide();
$(".menu ul li a").click(function() {
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$(".menu li").hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}
})
what i am trying to do is add the class "hover" to the "li" of the clicked "a" so that the drop down menu works properly on mobile deivices(device with less than 1000px in my case). but with the code above, i need to click twice to any "a" element for the dropdown to apper, as far as i am concerned when i click on "a" element, the class "hover" should be added to its parent "li" element and the hidden "ul" under it should be shown(because i have written the css in that manner) but at the moment i should click on the "a" element two times(not double click).The html structure is like:
<ul>
<li>
<a></a>
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
</ul>
I have the following code in html. I just want to remove active class when we click on other li and add active class to li on which it is clicked.
<ul class="pagination" id="paginationUL">
<li class="active">1</li>
<li onclick="javascript:selectThis()">2</li>
I tried to remove the class first and it is not working. Please suggest.
function selectThis() {
$('ul[class="pagination"] li[class="active"]').removeClass("active"));
}
Edited the script and it is working.
Your selectors are incorrect. You need to use the ID (#) or class (.) selector:
$('#paginationUL li.active').removeClass("active");
However, you're better off not using intrusive event handlers, and rather doing something along the lines of the following:
$('#paginationUL > li').on('click', function() {
$(this).addClass('active').siblings('.active').removeClass('active');
});
The latter example will apply a class of active to the clicked element and remove it from any other elements in the <ul>.
You can use something like this
$("#paginationUL li").click(function() {
$(this).toggleClass("active");
$(this).siblings().removeClass("active");
});
If you're using jquery this should do it:
$('#paginationUL li').click(function(){
$('#paginationUL li').removeClass("active");
$(this).addClass('active');
});
Your selector is incorrect. Use #paginationUL[class="pagination"] li[class="active"] or ul.pagination li.active or #paginationUL li.active
You can write a line to bind to all li elements in that menu. The $(this) selector acts against the element clicked on, while using .siblings() acts on all other child li elements.
$('#paginationUL > li').click(function(){
$(this).addClass('active').siblings().removeClass('active')
})
.active { background: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pagination" id="paginationUL">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
I am new to Html,jQuery coding.I want to change background color of item selected(clicked) of an li.
I have my code below :
#In HTML#
<div id="major" class="major-funds form-group"><strong>Major funds (above 1.0% market share)</strong>
<ul>
<li style="list-style: none; display:inline;padding-left:5px;" class="text-primary" ng-click="GetProducts(x.code)" ng-repeat="x in Major">{{x.code}}</li>
</ul>
</div>
# In controller#
$('#major li').click(function () {
$('li').removeClass('text-primary.selected');
$(this).addClass('text-primary.selected');
});
What am I doing wrong ? When I click on li item, It doesn't call that function.
IF I use this dynamic list it doesn't hit that function but if I use static list it does hit that function.How should I implement click function for dynamic list?
When I click on li item, It doesn't call that function.
Are you sure JQuery is loaded properly?
Are you sure, you're not setting another click event for your list items?
Is your CSS defined correctly?
Anyway, this works for me:
$(document).ready(function () {
$('#major li').click(function () {
$('li').removeClass('selected');
$(this).addClass('selected');
console.log("HERE");
});
});
.selected{
background: #FF00FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="major" class="major-funds form-group"><strong>Major funds (above 1.0% market share)</strong>
<ul>
<li>XXXXX</li>
<li>YYYY</li>
</ul>
</div>
The click event is triggered (check with console.log function) but the action you execute are not defined properly.
$('li').removeClass('text-primary.selected');
$(this).addClass('text-primary.selected');
should be
$('li').removeClass('selected');
$(this).addClass('selected');
If your list is dynamically generated (not in the DOM on page load), the problem may come from the click function. In this case, just use :
$(document).on('click', '#major li', function () {
$('li').removeClass('selected');
$(this).addClass('selected');
});
where you can replace document by the container of your list. Per example :
$('#major').on('click', 'li', function () {
$('li').removeClass('selected');
$(this).addClass('selected');
});
Here is a JSfiddle with working example: https://jsfiddle.net/ztvdnh86/2/
Try this:
# In controller#
$('#major li').click(function () {
$('li.selected').removeClass('text-primary selected');
$(this).addClass('text-primary selected');
});
what you've written 'text-primary.selected' tries to select the element with the tag-name text-primary with the class .selected
what you want to do is to remove the selected class from all the lis with the class text-primary and then add the class selected to the clicked (selected) element:
$('#major li').click(function () {
$('li.text-primary.selected').removeClass('selected');
$(this).addClass('selected');
});
I'm looking for a cross browser compatible solution to highlight tabs. On page load the first tab should highlight and on click of the other tabs, the first tab would unhighlight and the selected tab would highlight. Can't get this functionality working in same fashion in IE and Firefox at the same time. Any inputs on that?
Note: The below code works but when I click on any other link on the page, the focus on the tabs is lost and hence the currently selected tab is not highlighted.
JS
$(document).ready(function () {
activate('focusmeplease');
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function () {
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
});
});
function activate(link) {
if (document.getElementById) document.getElementById(link).focus();
else if (document.all) document.all(link).focus();
}
HTML
<div id="tabs">
<ul>
<li class="clas" onclick="javascript: addPlayer('tab-1','1649028604001');">
First tab
</li>
<li class="clas" onclick="javascript: addPlayer('tab-1','1651558610001');">
Second tab
</li>
</ul>
<div id="tab-1"></div>
</div>
In your click event, just call the focus method. Like so:
$(document).ready(function () {
activate('focusmeplease');
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function () {
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
$(this).focus(); //i've added this
});
});
See this Fiddle HERE
Finally this is the code that worked across browsers. I had to move the addPlayer function from the onClick action of the anchor tag to within the jQuery li click function.
jQuery(document).ready(function(){
addPlayer('tab-1', '1649028596001');//on page load, display this.
jQuery('#tabs ul li:first').addClass('active');
jQuery('#tabs ul li').click(function () {
addPlayer('tab-1', playerIdArray[jQuery(this).index()]);
jQuery('#tabs ul li').removeClass("active");
jQuery(this).addClass("active");
});
});
<ul>
<li class="class4" >Bond</li>
<li class="class5" >Stock</li>
</ul>
<div id="tab-1">
</div>
I have a project that uses drop-down menus that are nested ul's, like so:
<ul id="nav">
<li id="thome" class="navtab">
HOME
<ul id="subnav_home" class="submenu">
<li>Dashboard</li>
<li>SMS</li>
<li>Email</li>
<li>Twitter</li>
</ul>
</li>
</ul>
Using jQuery, I've added a .hover() to the .navtab li that .show()s the .submenu ul. The problem is that when the cursor moves into the new ul, the .hover()-out for the .navtab fires, .hide()ing the sub-menu, despite the fact that I have the height of the li so that it entirely wraps the .submenu ul.
I've tried adding a delay to the .hide(), but if you pass your cursor over the navtab bar quickly, you get all of the sub-menus at once.
Any solutions for me? Here's the relevant JavaScript. The hide() function is identical to .show() except that it shrinks the height and hides the ul (obviously).
$('.navtab').hover(
function(){
tabShowSubnav($(this).attr('id'));
},
function(){
tabHideSubnav($(this).attr('id'));
});
function tabShowSubnav(menu){
var sb = '#' + menu + ' > .submenu';
var tb = '#' + menu;
$('.navtab').each(function(){
if (!$(this).hasClass('current_page')){
$(tb).addClass('nav_hover');
}
});
$(tb).css('height','239px');
$(sb).show();
}
$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('current_page').addClass("nav_hover");
},
function() {
});
$(".submenu").mouseout(function(){
$(this).hide();
});
$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('.current_page').addClass("nav_hover");
},
function() {
$(this).children(".submenu").hide();
});
This worked for me.
I finally had to go with the jQuery plugin hoverIntent, that ignores children for the purpose of mouseout.