mathieu Posted April 21, 2013 Share Posted April 21, 2013 Hi, I'm trying to create a navigation menu. When you click on each item of the menu, it displays the corresponding target page below and hides the others. You will find HTML & JS code below and in attachment. Here is the way I proceed: with JS and my "initiateNavigation" function, I :1) attach a JS function to every link of the menu. This "navigation" function will be called on click and hide all the pages and display only the selected one.2) call the navigation function to display the first page (page 1). The initiateNavigation function is called when the document is ready: $(document).ready(function(){}; The problem is that every time I click on a link, it does the work and loads the targeted page, but the browser considers the document to be ready again, and it calls the initiateNavigation again and displays page 1. How can I call the initiateNavigation function once only? Thanks, M. HTML code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title></title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="javascript.js"></script> </head><body> <div> <div id="lienpage1"><a href="">Page 1</a></div> <div id="lienpage2"><a href="">Page 2</a></div> <div id="lienpage3"><a href="">Page 3</a></div> </div> <div> <div id="page1">bla bla page 1</div> <div id="page2">bla bla page 2</div> <div id="page3">bla bla page 3</div> </div> <div>test</div></body></html> JS code: function navigation(destinationsIdsArray,focus){ $.each(destinationsIdsArray, function(){ $('#'+this).hide(); }); $('#'+focus).fadeIn(500); } function initiateNavigation(selectorsIdsArray,destinationsIdsArray){ //selectorsIdsArray = array of ids of the selectors, i.e. divisions containing the links that will be used for selecting the target divisions to focus on. //destinationsIdsArray = array of ids of the target divisions. if(selectorsIdsArray.length!=destinationsIdsArray.length){ alert('both arrays do not have the same length'); return; } $.each(destinationsIdsArray, function(){ $('#'+this).hide(); }); $.each(selectorsIdsArray, function(){ var destination=destinationsIdsArray[$.inArray(String(this),selectorsIdsArray)]; $('#'+this).click(function(){ navigation(destinationsIdsArray,destination); }); }); navigation(destinationsIdsArray,destinationsIdsArray[0]); } $(document).ready(function(){ initiateNavigation(['lienpage1','lienpage2','lienpage3'],['page1','page2','page3']); }); Thanks index.html javascript.js.zip Link to comment Share on other sites More sharing options...
jeffman Posted April 21, 2013 Share Posted April 21, 2013 I suspect it is because you are wrapping your menu items in <a> elements. You are already capturing the click event, so using a link is redundant. But having it there with href="" forces the page to reload. Link to comment Share on other sites More sharing options...
mathieu Posted April 21, 2013 Author Share Posted April 21, 2013 Thank a lot, that was the cause indeed.Bye. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 22, 2013 Share Posted April 22, 2013 $('#'+this).click(function(e){ e.preventDefault(); navigation(destinationsIdsArray,destination); }); Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now