I am trying to link to a div that is in a separate tab. Currently the side navigation link is like this:
var loc = window.location.hash;
if (loc == "#bargain") {
jQuery('.tab-2').click();
App.SetBaseLine();
jQuery('#bargain').addClass('activeListColor');
};
<li>Bargain Packages</li>
<!-- start of tabHolder -->
<div id="tabHolder">
<ul class="tabs_new buttons">
<li class="liOuter" id="tab1">Buyers' Guide</li>
<li class="liInner" id="tab2">Pricing Guide</li>
</ul>
Unfortunately, this does not take me under the second tab. I am trying to have a user click the link, and it opens the tab and anchors down to the div location.
I am open to suggestions.
You can do this way:
<ul class="tab">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div class="tabs">
<div id="tab1">Content 1</div>
<div id="tab2">Something here</div>
<div id="tab3">Omg! Three</div>
</div>
And the script as:
$(document).ready(function(){
$(".tab > li > a").click(function(){
var tab = $(this).attr('href');
$(".tab > li > a").removeAttr("style");
$(this).css("background-color", "#ccc");
$('.tabs > div:visible').hide(function(){
$(tab).show();
});
return false;
});
$('.tabs > div').hide();
$('.tabs > div:first-child').show();
});
CSS:
body {overflow: hidden;}
ul li {display: inline-block; *display: inline; *zoom: 1;}
a {text-decoration: none; color: #f60; border-radius: 5px; padding: 5px; display: inline-block; *display: inline; *zoom: 1;}
div {padding: 5px;}
Fiddle! Hope this is a best way to use tabs. :)
You can use the following jQuery to achieve a 'tab' like effect
$('a').click(function() {
$('div').hide();
var destination = '#' + $(this).attr('data-tab');
$(destination).toggle();
});
See this live example
Here is an updated example with the divs wrapped in an unordered list
Alternatively, you can use a 'current' class and toggle that on click using the following code:
$('a').click(function() {
$('.tabs div').removeClass('current');
var destination = '#' + $(this).attr('data-tab');
$(destination).toggleClass('current');
});
Another live example here
Related
Following is my code. I am trying for a simple drop down when clicking on to li and slideup when clicking li back again. But it's not working. I don't know whats wrong. Can anyone comment on this? On top, I am trying to click on the body to get the menu slide back up again. But not when clicking inside the actual menu box (in green).
$(document).ready(function(){
let list = $('ul li');
let mega = $('.megamenu');
list.click(function(e){
e.preventDefault();
mega.slideDown(400);
if((e.target) == list){
mega.slideUp(400);
}
})
});
li{
list-style:none;
display:inline-block;
padding-right: 5rem;
}
.megamenu{
background:green;
padding:5rem;
color:white;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li>Page 1
<div class ='megamenu'><h1>Mega menu</h1></div>
</li>
<li>Page 2
<div class ='megamenu'><h1>Mega menu</h1></div>
</li>
</ul>
</div>
Could you change like this for click to li to dropdown and click li slideup again
$(document).ready(function(){
let list = $('.menu');
let mega = $('.submenu');
list.click(function(e){
e.preventDefault();
var menuDisplay = mega.css('display');
if(menuDisplay == 'block') {
mega.slideUp(400);
} else {
mega.slideDown(400);
}
})
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li class='menu'>Page 1
<div class ='submenu'><h1>Mega menu</h1></div>
</li>
<li class='menu'>Page 2
<div class ='submenu'><h1>Mega menu</h1></div>
</li>
</ul>
</div>
CSS
.menu{
list-style:none;
display:inline-block;
padding-right: 5rem;
}
.submenu{
background:green;
padding:5rem;
color:white;
display:none;
}
And click Page1 or Page2 to see slideUp and slideDown
I have 4 different divs and 4 buttons, I'm trying to create a tabbed content using jQuery but I can't get it working right. So, I have used data-tab attribute.
jsfiddle.net
jQuery(document).ready(function() {
jQuery('#tabInteract .buttons a').click(function() {
var index = jQuery(this).index();
if(jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active');
jQuery('#' + jQuery(this).data('tab')).toggleClass(true);
} else {
jQuery('#tabInteract .buttons a').removeClass('active');
jQuery(this).addClass('active')
jQuery('#' + jQuery(this).data('tab')).toggleClass(true);
}
})
});
When I click on next button it doesnt close the previous div.
To achieve this behaviour you need to toggle the state of the active button, along with it's related tab, whilst hiding all the other tabs and removing the active class from the other buttons. Try this:
$('#tabInteract .buttons a').click(function() {
var $button = $(this).toggleClass('active');
$('#tabInteract .buttons a').not($button).removeClass('active');
var $tab = $('#' + $(this).data('tab')).toggle();
$('.closable_box').not($tab).hide();
})
a {
display: inline;
margin: 5px;
color: #000;
}
a.active {
color: red;
}
.closable_box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabInteract">
<div class="buttons">
<a data-tab="sports" href="#">Button A</a>
<a data-tab="cars" href="#">Button B</a>
<a data-tab="fruits" href="#">Button C</a>
<a data-tab="cats" href="#">Button D</a>
</div>
</div>
<div class="closable_box" id="sports">
Sports
</div>
<div class="closable_box" id="cars">
Cars
</div>
<div class="closable_box" id="fruits">
Fruits
</div>
<div class="closable_box" id="cats">
Cats
</div>
Using pure CSS and some javascript, how can I manage to remove and add the class 'active' to my li item? I tried using the 'onclick' function in javascript. It changes the color of the item but it doesn't redirect me to the link of my the selected item.
<div class="main_navs">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li> Wishlist</li>
<li> Register</li>
<li> Gift Card</li>
<li><a href="cart.php" class="main_navmenu"
<i class="fa fa-shopping-cart"></i> Cart <span class="badge">0</span></a></li>
</ul>
</div>
<script type="text/javascript">
$('#main_menu_items li a').on('click', function(){
$('li a.active').removeClass('active');
$(this).addClass('active');
});
</script>
CSS:
.main_navs ul li a.active{
background: rgba(255,255,255,0.2);
color: #333;
}
.main_navs ul li a{
background: rgba(0,0,0,1);
color: #fff;
}
I think this should help you out. It should add the class active to the matching anchor in your menu on page load.
<script>
$(function() {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('.main_navs a').each(function() {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});
});
</script>
Remove trailing slash first and then it would equal to the url that you want to match.
My solution is:
var current = window.location.href;
var current_url = current.replace(/\/$/, "");
$('.navbar-nav a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current_url) !== -1){
$this.addClass('active');
}
});
I want to create a navigation menu with the exact same functionality as the one on this site: http://www.rex-ny.com/
I would prefer to do it only using HTML and CSS, but I tried all day and couldn't find a solution.
When I select a menu item, I want that menu to stay open after the page loads. Is this possible?
I want to also make the Main menu items clickable, so that they load a new page AND when that page loads that menu is open.
Here is what I have so far:
http://jsfiddle.net/MEL9d/
Here is the jquery:
$(document).ready(function () {
$('#menu > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#menu li ul').hide();
$(this).next().toggle();
$('#menu li a').removeClass('active');
$(this).addClass('active');
}
});
});
And CSS:
#menu {
float: left;
}
#menu li a {
display: block;
}
#menu li ul {
display: none;
}
You can do this is plain HTML and CSS. Assuming you have a structure like this:
- site
+ css
+ js
index.html
about.html
You can add a class to the body of each page, so index for index.php and about for about.php:
<body class="about">
Then in your menu, add an id (or a class if you plan on having the menu in many places) to each item that corresponds to the page:
<ul id="menu">
<li id="index" class="active"><a href="index.html"></li>
<li id="about"><a href="about.html"></li>
</ul>
Finally, using CSS you can style the menu items for each page specifically:
.index #index,
.about #about,
#menu .active {
// styles for active item
}
I am trying to create a menu system where when a list anchor is clicked, a div below the ul list is shown. but the system is not working and i can't control if the user is over the displayed div.
Here below is the code where
I created UL list to create tabs
I created DIVs as pages to be displayed
I created jquery mouseenter event to display the div with same class as of the link's ID
I used mouseleave function to hide the displayed div.
<style>
.tabs_button ul {list-style:none; margin:0px; padding:0px;}
.tabs_button ul li {float:left; display:inline; margin-right:50px;}
.tabs_button ul li a{color:#FFF; text-decoration:none;}
.tabs_button ul li a:hover{color:#FFC222;}
.tab_pages{clear:both; position:absolute; }
.tab_pages div{display:none;width:200px; height:200px; background- color:#CCC;margin-top:30px;}
</style>
<script>
$(document).ready(function(e) {
$(".tabs_button a").mouseenter(function(e) {
var tid=this.id;
$(".tab_pages div").hide();
$(".tab_pages ."+tid).show();
});
$(".tabs_button a").mouseleave(function(e) {
var tid=this.id;
$(".tab_pages ."+tid).hide();
});
});
</script>
<div class="tabs_button">
<ul>
<li>Cars</li>
<li>Price & Offers</li>
<li>Chevy Experience</li>
<li>Service</li>
<li>Contact Us</li>
</ul>
</div>
<div class="tab_pages">
<div class="page1">
Cars Display Page
</div>
<div class="page2">
Offers Display Page
</div>
<div class="page3">
Chevy Exp Page
</div>
<div class="page4">
Service Display Page
</div>
<div class="page5">
Contact us Display Page
</div>
</div>
Here the main part i am having problem is to keep div showing if the user is hovering over the div.
Edit: Fiddle
I have created complete code bin for above issue on http://codebins.com/bin/4ldqpam
So, Try on it.
To Solve this follow below steps:
1) Include latest jQuery.js javascript file on html header tag first.
2) HTML (Little bit Changes)
<div class="tabs_button">
<ul>
<li id="page1">
<a href="#">
Cars
</a>
</li>
<li id="page2">
<a href="#">
Price & Offers
</a>
</li>
<li id="page3">
<a href="#">
Chevy Experience
</a>
</li>
<li id="page4">
<a href="#">
Service
</a>
</li>
<li id="page5">
<a href="#">
Contact Us
</a>
</li>
</ul>
</div>
<div class="tab_pages">
<div class="page1">
Cars Display Page
</div>
<div class="page2">
Offers Display Page
</div>
<div class="page3">
Chevy Exp Page
</div>
<div class="page4">
Service Display Page
</div>
<div class="page5">
Contact us Display Page
</div>
</div>
3) CSS (Add Few More Styles):
body{
background-color:#000;
}
.tabs_button{
width:950px;
}
.tabs_button ul {
list-style:none;
margin:0px;
padding:0px;
}
.tabs_button ul li {
width:120px;
float:left;
display:inline;
margin-left:10px;
margin-right:10px;
text-align:center:
}
.tabs_button ul li:hover a{
color:#FFC222;
}
.tabs_button ul li:hover{
background-color:#445566;
}
.tabs_button ul li a{
color:#FFF;
text-decoration:none;
}
.tabs_button ul li a:hover{
color:#FFC222;
}
.tabs_button ul li.selected a{
color:#FFC222;
}
.tabs_button ul li.selected{
background-color:#445566;
}
.tab_pages{
clear:both;
position:absolute;
}
.tab_pages div{
display:none;
width:120px;
height:200px;
color:#fff;
background-color:#445566;
margin-top:27px;
position:absolute;
}
4) JQuery for Menu Navigation:
$(".tabs_button li,.tab_pages div").mouseenter(function() {
var className = $(this).attr('id');
$(".tabs_button #" + className).removeClass("selected");
if (typeof(className) == "undefined" || className == null) {
className = $(this).attr('class');
$(".tabs_button li").removeClass("selected");
$(".tabs_button #" + className).addClass("selected");
}
$(".tab_pages div").hide();
var offset = $(".tabs_button li#" + className).offset();
$(".tab_pages ." + className).css({
'left': offset.left - 8
});
$(".tab_pages ." + className).show();
});
Try using the mousover event instead, like:
$(".tabs_button a,.tab_pages").mouseover(function() {
});
Remove the (".tab_pages div").hide(); from your mouseenter() event. Also, in the .tab_pages style, change position:absolute to float:left. If you were to use absolute positioning, you would need to specify either a top or bottom position and a left or right position, for example - top:0px; left:0px. But since you are specifying a top-margin of 30px, use float - absolutely positioned divs cannot have margins added to them. Lastly, in your .tabs_button ul li style, the display:inline does not do anything - calling float:left changes the li to a block element - which is what you want. I have copied the code with the changes below - should work for you.
<style>
.tabs_button ul {list-style:none; margin:0px; padding:0px;}
.tabs_button ul li {float:left; margin-right:50px;}
.tabs_button ul li a{color:#FFF; text-decoration:none;}
.tabs_button ul li a:hover{color:#FFC222;}
.tab_pages{clear: both; float: left; }
.tab_pages div{display:none;width:200px; height:200px; background-color:#CCC;margin-top:30px;}
</style>
<script>
$(document).ready(function(e) {
$(".tabs_button a").mouseover(function(e) {
var tid=this.id;
$(".tab_pages ."+tid).stop().show();
});
$(".tabs_button a").mouseout(function(e) {
var tid=this.id;
$(".tab_pages ."+tid).stop().hide();
});
});
</script>
<body>
<div class="tabs_button">
<ul>
<li>Cars</li>
<li>Price & Offers</li>
<li>Chevy Experience</li>
<li>Service</li>
<li>Contact Us</li>
</ul>
</div>
<div class="tab_pages">
<div class="page1">
Cars Display Page
</div>
<div class="page2">
Offers Display Page
</div>
<div class="page3">
Chevy Exp Page
</div>
<div class="page4">
Service Display Page
</div>
<div class="page5">
Contact us Display Page
</div>
</div>