jQuery Animate inline style issue - javascript

I cant fix one bug in my code. I create on click slide up/down div, but yet when i click it 4 times very fast my css top value is to height and function stop working. Can you please suggest me some solution or another way to handle this ?
Here is code:
$(function() {
$(".nav li a").click(function(event) {
var page = $(this).attr("href")
var topVal = $("#about").css("top")
if (topVal != "-500px") {
$(page).animate({
top: "-=500"
}, 500).css("top", "-500px")
} else {
$(page).animate({
top: "+=500"
}, 500)
event.preventDefault()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
</ul>
<!-- About Page-->
<section id="about" class="container-fluid col-md-9" style="top: -500px;">About
</section>


Is this what you want?
$(function() {
$(".nav li a").click(function(event) {
var page = $(this).attr("href")
var topVal = $("#about").css("top")
if (topVal != "-500px") {
$(page).animate({
top: "-=500"
}, 500).css("top", "-500px")
} else {
$(page).animate({
top: "+=500"
}, 500)
event.preventDefault()
}
});
});
section { position: relative; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
</ul>
<!-- About Page-->
<section id="about" class="container-fluid col-md-9" style="top: -500px;">About
</section>
I think this is better:
$(function() {
$(".nav li a").click(function(event) {
var href=$(this).attr('href');
$(href).toggleClass('offscreen');
event.preventDefault()
});
});
section { position: relative; transition: 0.5s all; top:0 }
.offscreen { top: -500px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
</ul>
<!-- About Page-->
<section id="about" class="container-fluid col-md-9 offscreen">About
</section>

Related

Hamburger icon not opening

$('.open-overlay').click(function() {
var overlay_navigation = $('.overlay-navigation'),
nav_item_1 = $('nav li:nth-of-type(1)'),
nav_item_2 = $('nav li:nth-of-type(2)'),
nav_item_3 = $('nav li:nth-of-type(3)'),
nav_item_4 = $('nav li:nth-of-type(4)'),
nav_item_5 = $('nav li:nth-of-type(5)'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item');
nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1');
nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2');
nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3');
nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4');
} else {
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse');
nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse');
nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse');
nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse');
nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse');
}
})
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Works</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-top"></span>
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
</div>
</section>
Here is my code when being ran on code snippet, thank you for your assistance in advance :)
$('.open-overlay').click(function() {
var overlay_navigation = $('.overlay-navigation'),
nav_item_1 = $('nav li:nth-of-type(1)'),
nav_item_2 = $('nav li:nth-of-type(2)'),
nav_item_3 = $('nav li:nth-of-type(3)'),
nav_item_4 = $('nav li:nth-of-type(4)'),
nav_item_5 = $('nav li:nth-of-type(5)'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item');
nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1');
nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2');
nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3');
nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4');
} else {
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse');
nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse');
nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse');
nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse');
nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse');
}
})
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Works</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-top"></span>
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
</div>
</section>
My hamburger icon is currently not opening, I figure that it is a problem with my JavaScript. Any other tips and tricks when coming to JavaScript are very much welcome as I am a beginner, so your assistance would be very much appreciated.
java.js
$('.open-overlay').click(function () {
var overlay_navigation = $('.overlay-navigation'),
nav_item_1 = $('nav li:nth-of-type(1)'),
nav_item_2 = $('nav li:nth-of-type(2)'),
nav_item_3 = $('nav li:nth-of-type(3)'),
nav_item_4 = $('nav li:nth-of-type(4)'),
nav_item_5 = $('nav li:nth-of-type(5)'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down');
nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item');
nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1');
nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2');
nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3');
nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4');
} else {
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up');
nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse');
nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse');
nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse');
nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse');
nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse');
}
});
my html
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Works</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-top"></span>
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
</div>
</section>

It's a bit hard to see what's going on as you're not including your CSS, and there's a lot of unnecessary code there (everything relating to your nav items).
I broke out a simple example that works:
document.getElementById('open-overlay').addEventListener('click', e => {
document.getElementById('overlay-navigation').classList.toggle('active');
})
.bar {
display: block;
height:5px;
width:20px;
margin:2px 0;
background-color: black;
}
#overlay-navigation {
display: none;
}
#overlay-navigation.active {
display: block;
}
<section class="home">
<div id="open-overlay">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</section>
<div id="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Works</li>
<li>Contact</li>
</ul>
</nav>
</div>
Things that I changed:
open-overlay and overlay-navigation are now ids and not classes
overlay-navigation has it's display set to none by default (hidden)
.active simply sets the display back to block

checking both scrollTop and id offset for sticky menu in single condition

I want to check the scroll position is greater than 350 and menuSticky offset position is 92 in same condition.that condition is not working.I gave my piece of code
$(window).scroll(function(){
if($(document).scrollTop() > 350) {
$('.secMenu').addClass('menuSticky');
} else {
$('.secMenu').removeClass('menuSticky');
}
var menu = $('.menuSticky'); //shows error
// var menu = $('.secMenu'); working
var origOffsetY = menu.offset().top;
console.log(menu.offset().top);
if((($('.menuSticky').offset.top)==92)) {
console.log('true');
$('.dropdown').hover(function() {
$('.secMenu').hide();
$(this).toggleClass("open");
}).mouseleave(function(){
$('.secMenu').show();
});
}
});
.menuSticky{
/*top:14%; */
top:92px;
z-index:999;
position: fixed;
width: 100%;
left:1.1%;
}
#consultant,#segment,#partner,#insights{
min-height:100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1" >Consulting & Solutions</li>
<li class="test2" >Segments</li>
<li class="test3" >Our Partners</li>
<li class="test4" >Perspectives</li>
</ul>
</div>
</div> <!--End of second menu -->
<div class="" id="consultant">consultant
</div>
<div class="" id="segment">segment
</div>
<div class="" id="partner">partner
</div>
<div class="" id="insights">insights
</div>
updated
$(window).scroll(function(){
if($(document).scrollTop() > 350) {
$('.secMenu').addClass('menuSticky');
} else {
$('.secMenu').removeClass('menuSticky');
}
var menu = $('.menuSticky');
console.log(menu.length);
if (menu.length==1) {
var origOffsetY = menu.offset().top;
console.log(menu.offset().top);
$('.dropdown').hover(function() {
$('.menuSticky').hide();
$(this).toggleClass("open");
}).mouseleave(function(){
$('.menuSticky').show();
});
}
});
.menuSticky{
/*top:14%; */
top:92px;
z-index:999;
position: fixed;
width: 100%;
left:1.1%;
}
#consultant,#segment,#partner,#insights{
min-height:100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1" >Consulting & Solutions</li>
<li class="test2" >Segments</li>
<li class="test3" >Our Partners</li>
<li class="test4" >Perspectives</li>
</ul>
</div>
</div> <!--End of second menu -->
<div class="" id="consultant">consultant
</div>
<div class="" id="segment">segment
</div>
<div class="" id="partner">partner
</div>
<div class="" id="insights">insights
</div>

In your block of code have a condition to remove class menuSticky when scroll position less than 350px. So it will be a case you try to get offset top from an undefined variable menu.
To fix your issue, check menuSticky is existing before doing further.
var menu = $('.menuSticky');
if (menu.length) {
var origOffsetY = menu.offset().top;
console.log(menu.offset().top);
if ((($('.menuSticky').offset.top) == 92)) {
console.log('true');
$('.dropdown').hover(function () {
$('.secMenu').hide();
$(this).toggleClass("open");
}).mouseleave(function () {
$('.secMenu').show();
});
}
}

jQuery: change text color of a fixed top navbar at the scrolling of the page

I need help for my personal website. I want to make a one page site with a fixed top navbar (with transparent background). At the scrolling of the page, the color of the menu elements must change dinamically from black to white on the sections that have a dark background (they have a ".dark-bg" class) and return white on the other sections. All sections are 100vh height (except for the menu, of course). This is the HTML main structure of the site:
<section class="section--menu fixed-header">
<nav class="menu" id="navigation">
<ul class="menu__list pull-md-right">
<li class="menu__item menu__item--current">
<a class="menu__link" data-target="intro-fabio">home</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="about-fabio">about</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="skills-fabio">skills</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="works-fabio">works</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="contacts-fabio">contacts</a>
</li>
</ul>
</nav>
</section>
<!-- HOME
======================================================== -->
<section id="intro-fabio">
</section>
<!-- ABOUT
======================================================== -->
<section id="about-fabio" class="dark-bg">
</section>
<!-- SKILLS
======================================================== -->
<section id="skills-fabio">
</section>
<!-- WORKS
======================================================== -->
<section id="works-fabio" class="dark-bg">
</section>
<!-- CONTACTS
======================================================== -->
<section id="contacts-fabio">
</section>
I wrote this jQuery script but it seems to work only for the last section with ".dark-bg" class.
$(document).ready(function() {
$(".dark-bg").each(function() {
detectBg( $(this) );
});
function detectBg(sezione) {
$(window).scroll(function() {
var finestra = $(window).scrollTop();
var sezCurr = sezione.offset().top;
var sezNext = sezione.next().offset().top;
if (finestra >= sezCurr && finestra < sezNext) {
$('.menu__link').css("color", "#ebebeb");
}
else {
$('.menu__link').css("color", "#1c1c1c");
}
});
}
});
Thanks in advance!

You need to handle scroll event of the window, and in that handler, check if any of the dark section is under the menu, if so, then change the color of the menu links. Here is an example of changing the color for all links, but it can be easily extended to do it separately for each link:
$(window).scroll(function() {
var vpHeight = $(window).height();
var isBlack = false;
$(".dark-bg").each(function(i, section) {
if(isBlack) {
return;
}
var offset = $(section).offset().top - $(window).scrollTop();
if(((offset + vpHeight) >= 0) && ((offset + vpHeight) <= vpHeight)) {
isBlack = true;
return;
}
});
$(".menu__link").css("color", isBlack ? "white" : "black");
});
body {
padding: 0;
margin: 0;
}
ul {
position:fixed;
background: orange;
padding: 0;
margin: 0;
list-style-type: none;
}
ul > li {
float: left;
padding: 0 4px;
}
section {
background:red;
height: 100vh;
}
.dark-bg {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu__list pull-md-right">
<li class="menu__item menu__item--current">
<a class="menu__link" data-target="intro-fabio">home</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="about-fabio">about</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="skills-fabio">skills</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="works-fabio">works</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="contacts-fabio">contacts</a>
</li>
</ul>
<!-- HOME
======================================================== -->
<section id="intro-fabio">
</section>
<!-- ABOUT
======================================================== -->
<section id="about-fabio" class="dark-bg">
</section>
<!-- SKILLS
======================================================== -->
<section id="skills-fabio">
</section>
<!-- WORKS
======================================================== -->
<section id="works-fabio" class="dark-bg">
</section>
<!-- CONTACTS
======================================================== -->
<section id="contacts-fabio">
</section>

need to disable fadeout function for the dropdown (only) menu

I have a problem with my menu in mobile mode. onClick it fadesOut. I want to keep this setting, but I don't want it to fadeOut when one clicks on the dropdown part.
here is link: http://jsfiddle.net/zLLzrs6b/3/
appreciate your help!
html:
<nav id="nav-wrap"> <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll mobile" href="#about">about</a>
</li>
<li><a class="smoothscroll mobile" href="#documents">blog</a>
</li>
<li class="nav-item">dropdown
<ul class="langop">
<li>otion 1
</li>
<li>otion 2
</li>
</ul>
</li>
</ul>
</nav>
css:
.langop {
display:none;
position: relative;
width:auto;
}
.nav-item:hover .langop {
display: block;
}
java:
var toggle_button = $("<a>", {
id: "toggle-btn",
html: "Menu",
title: "Menu",
href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function (e) {
e.preventDefault();
nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function () {
if (toggle_button.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function () {
if (nav.hasClass('mobile')) nav.fadeOut('fast');
});

See this demo.
$('ul#nav > li > a').on("click", function () {
if (nav.hasClass('mobile'))
nav.fadeOut('fast');
});

Find the clicked element by using event.target, if it's dropdown part then don't hide
var toggle_button = $("<a>", {
id: "toggle-btn",
html: "Menu",
title: "Menu",
href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function(e) {
e.preventDefault();
nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function() {
if (toggle_button.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function(e) {
var target = $(".langop");
if (!target.is(e.target) //checking clicked item is the dripdown list
&& target.has(e.target).length === 0 //chekking clicked element is inside the dropdown
&& nav.hasClass('mobile')) {
nav.fadeOut('fast');
}
});
.langop {
display: none;
position: relative;
width: auto;
}
.nav-item:hover .langop {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll mobile" href="#about">about</a>
</li>
<li><a class="smoothscroll mobile" href="#documents">blog</a>
</li>
<li class="nav-item">dropdown
<ul class="langop">
<li>otion 1
</li>
<li>otion 2
</li>
</ul>
</li>
</ul>
</nav>

How to load the content onclick menu?

I have vertical menu. when I click on each menu it should load the content and should display..
here I have my code
<ul id="menu">
<li class="selected">Home</li>
<li>About</li>
<li>Technologies</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home" >
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
so if i click on home menu in div it should show the home page..first function is to highlight the selected menu
and here my jquery
function highlightTab(link_id){
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_"+link_id).parent().addClass('selected');
}
$(document).ready(function()
{
$('#selected').on('click','a',function()
{
$('.display:visible').fadeOut();
$('.display[id='+$(this).attr('id')+']').fadeIn();
});
});
this is my css code
ul#menu li.selected{
background-color:black;
color:white;
}
.display
{
left: 734px;
position: relative;
}
How to do it?

There were some thing wrong with your code:
You've 2 the same ID's (the A and the DIV), updated with data-target.
You were searching for "#selected" instead of ".selected", updated this to #menu.
In JSFiddle the highlightTab function isn't being found. Why not mixing those two like here?
HTML:
<ul id="menu">
<li class="selected">Home
</li>
<li>About
</li>
<li>Technologies
</li>
<li>Services
</li>
<li>Contact Us
</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home">
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
JS:
function highlightTab(link_id) {
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_" + link_id).parent().addClass('selected');
}
$(document).ready(function () {
$('#menu').on('click', 'a', function () {
$('.display:visible').fadeOut();
$('.display[id="' + $(this).data('target') + '"]').fadeIn();
});
});
CSS:
ul#menu li.selected {
background-color:black;
color:white;
}
.display {
display: none;
}

Categories