I have looked around for a solution but I can't find one.
I want to have a nav bar with 4 buttons using <li>. I need each button to have an active state when clicked without reloading the page. If the user presses a button all other buttons should be un-active and the one clicked active. One button(all) will need to be active as default when the page is loaded.
<ul id="filtering-nav">
<li><a class="work"><div>Work</div></a></li>
<li><a class="like"><div>Like</div></a></li>
<li><a class="news" ><div>News</div></a></li>
<li><a class="all"><div>All</div></a></li>
</ul>
You can do it almost the same way like when you are reloading the page.
1) Use "active" class for the active button (styled by CSS as you need)
2) On button click remove active class from other buttons and add it to the clicked button
Html:
<ul id="filtering-nav">
<li><a class="work active"><div>Work</div></a></li>
<li><a class="like"><div>Like</div></a></li>
<li><a class="news" ><div>News</div></a></li>
<li><a class="all"><div>All</div></a></li>
</ul>
Javascript:
var $buttons = $('#filtering-nav a'); //select all buttons
$buttons.click(function(e){ //on click...
$buttons.removeClass('active'); //deselect all buttons
$(this).addClass('active'); //make clicked button active
e.preventDefault(); //prevent redirection
});
Working example: Click here
<script>
$(function()
{
$('#filtering-nav a').click(function(event){
$('#filtering-nav a').removeClass('active');
$(this).addClass('active');
event.preventDefault();
});
});
</script>
<ul id="filtering-nav">
<li><a class="work active"><div>Work</div></a></li>
<li><a class="like"><div>Like</div></a></li>
<li><a class="news"><div>News</div></a></li>
<li><a class="all"><div>All</div></a></li>
</ul>
Related
I have this fly-out mene. This is the HTML:
<ul class="nav">
<li class="tab"><a class="active" href='#sw_operations'>Software Operations</a></li>
<li class="tab"><a href='#software'>Software</a></li>
<li class="tab"><a href='#fac_staff'>Fac/Staff Members</a></li>
<li class="tab"><a href='#vendor'>Vendors</a></li>
<li class="tab"><a href='#admin'>Admin</a>
<ul>
<li><a href='#users'><span>Users</span></a></li>
<li><a href='#variables'><span>Variables</span></a></li>
<li><a href='#Reports'><span>Reports</span></a></li>
</ul>
</li>
</ul>
And this is the JS:
$('.tab a').on('click', function (e) {
e.preventDefault();
$(".tab a").removeClass('active');
$(".tab a").parent().removeClass('active');
$(this).addClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
What I am struggling with is, when the user hits one of the 3 children tabs, I want it to add that specific child tab to active class as well as it's parent. I have a CSS part for the tab being active.
How do I add the parent tab in addition to the child tab to active class in JS?
Thanks :)
Something like that :
<li class="tab"><a id='admin' href='#admin'>Admin</a>
<ul>
<li><a href='#users' data-parent-id='admin'><span>Users</span></a></li>
<li><a href='#variables' data-parent-id='admin'><span>Variables</span></a></li>
<li><a href='#Reports' data-parent-id='admin'><span>Reports</span></a></li>
</ul>
$('.tab a').on('click', function (e) {
e.preventDefault(enter code here);
$(".tab a").removeClass('active');
$(this).addClass('active');
$(".tab #"+$(this).attr('data-parent-id')).addClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
I would do it like this but there are several ways how to do this...
Firstly you add a child class to all of your <li> elements. Then you add an id of 'Admin' for example to your admin <li>.
Now in jQuery you can check if the element on which you pressed is of class child or not. If it is true then you can add the class of active to your Admin <li>.
Code:
<li class="tab" id="Admin"><a href='#admin'>Admin</a>
<ul id="Children">
<li><a class="child" href='#users'><span>Users</span></a></li>
<li><a class="child" href='#variables'><span>Variables</span></a></li>
<li><a class="child" href='#Reports'><span>Reports</span></a></li>
</ul>
</li>
jQuery Code:
$('.tab a').on('click', function (e) {
if($(this).hasClass("child") == true) {
$("#Admin").addClass('active');
}
});
You just have to append the if statement to your code, I didn't include your code.
I would like to redirect about and contacts to their "proper page" when they get clicked, e.g. clicking on about should redirect to about.html.
It does work quite well with magazine, books and talks, since I just want them to redirect to index.html when clicked.
This is my html code:
<div class="navbar-collapse collapse">
<ul id="filter">
<ul class="nav navbar-nav">
<li><a href="#" data-group="magazine">
<span class="span-text">Magazine</span></a></li>
<li><a href="#" data-group="books">
<span class="span-text">Books</span></a></li>
<li><a href="#" data-group="talks">
<span class="span-text">Talks</span></a></li>
<li><a href="about.html">
<span class="span-text">About</span></a></li>
<li><a href=mailto:info#enyamoore.com>
<span class="span-text">Contact</span></a></li>
</ul>
</ul>
</div>
Js:
<script>
$(document).ready(function() {
/* initialize shuffle plugin */
var $grid = $('#grid');
$grid.shuffle({
itemSelector: '.item' // the selector for the items in the grid
});
/* reshuffle when user clicks a filter item */
$('#filter a').click(function (e) {
// set active class
$('#filter a').removeClass('active');
$(this).addClass('active');
// get group name from clicked item
var groupName = $(this).attr('data-group');
// reshuffle grid
$grid.shuffle('shuffle', groupName );
});
});
</script>
Have you any suggestions? Thanks in advance.
This is should be a simple fix, you only have to put a back slash in front of the page. Note that #/about.html will not work. For the "using data-groups" part could you be a bit more specific? That might affect this answer.
I have one button and bootstrap tab.
on click of button want to add class active to first tab element.
I'm generating all tab elements dynamically , and want to active only very first tab element on button click.
MyButton
<ul class="nav nav-tabs">
<li>div1<i class="fa"></i></li>
<li>div2 <i class="fa"></i></li>
</ul>
Here is a JSFiddle, clicking the button you have the first tab with class active:
HTML:
<ul class="nav nav-tabs">
<li>div1<i class="fa"></i>
</li>
<li>div2 <i class="fa"></i>
</li>
</ul>
<button class="btn btn-default clickme">Click</button>
JS:
$(document).ready(function () {
$('.clickme').click(function () {
$('.nav-tabs li:first').addClass('active');
});
});
try this:
$('#MyButton').click(function() {
$('.nav-tabs a:first').tab('show');
});
I have a problem with a drop down menu that must remain open to the click.
After the menu is open, you can click the link inside and the menu item just clicked.
How can I do to remedy the preventDefault ?
Menu HTML:
<nav class="main-menu">
<ul id="" class="menu">
<li>
Menu One
<div class="sub-menu">
<ul>
<li>test test test</li>
... More links ...
</ul>
</div>
</li>
... More items ...
</ul>
</nav>
This is a portion of code
$('.main-menu li a').click(function(event) {
event.preventDefault();
$('.main-menu').find('.sub-menu').removeClass('open');
$(this).parent().find('.sub-menu').addClass('open');
});
An example is visible here JSFIDDLE
Just remove
$('.main-menu').find('.sub-menu').removeClass('open');
Here is a fiddle you can check out
Get rid of event.preventDefault();
Instead do like this
<a href="#" onclick="return false">
Then give each main menu a class name. And call the click event on that class.
https://jsfiddle.net/btevfik/9m9rufqx/3/
You can replace your selector with a more targeted (.menu > li > a) :
$('.menu > li > a').click(function(event) {
event.preventDefault();
$('.sub-menu.open').removeClass('open');
$(this).parent().find('.sub-menu').addClass('open');
});
JSFiddle
I have this jquery script:
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".navigation li:first").addClass("selectedli").show(); //Activate first tab
//On Click Event
$(".navigation li").click(function() {
$(".navigation li").removeClass("selectedli"); //Remove any "active" class
$(this).addClass("selectedli"); //Add "active" class to selected tab
});
});
</script>
and css is as follows
.selectedli a {background: #3a73ba; color:#fff; cursor:default;}
and menu is written as
<div class="navigation">
<ul>
<!--<li>About Us
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> Member Profile Message from MD History </div>
</li>-->
<li class="selectedli">Home</li>
<li>2nd Page</li>
<li>Third Page</li>
</ul>
</div>
but when I click the link and navigate to "inner_index.php" the first li is selected whereas I want to select the second li. What should I do?
you can use
:second
or
:eq(1)
So
$(".navigation li:first").addClass("selectedli").show(); //Activate first tab
will become
$(".navigation second").addClass("selectedli").show(); //Activate first tab