CODEWITHSUNDEEP
javascriptjqueryhtml
Amit
Amit

Reputation: 7818

Creating navigational pages with jquery

I actually didn't really know how to phrase the question title, but here is the description. Suppose I'm using jQuery to show/hide uls that are stacked on top of each other (absolutely positioned). For example:

<ul id="one">
  <li>blah</li>
  <li>blah2</li>
</ul>

<ul id="two">
  <li>blah</li>
  <li>blah2</li>
</ul>

I have a controller button, that when pressed, simply changes the z-index of these uls. The controller button is literally just:

<a href="#" id="mybutton">My button</a>

With jQuery code that does: (I'm using the jQuery cycle plugin)

$('#mybutton').click(function() { 
  // check which ul is currently shown
  // change z-index, so that the next ul is to be shown
});

THE QUESTION:

In my site, I have several pages that I would like to point to the second ul, so that when clicked, it'll bring them to the page with all of the uls, but only the second one will be shown. It would be the same if the person went to the page, had the default first ul shown, and then clicked "next" to proceed to the next ul. I am simply wondering if it's possible to avoid pressing "next", and just bring the user directly to the page and have the second ul shown.

Upvotes: 1

Views: 73

Answers (2)

nuala
nuala

Reputation: 2688

I think you can use the hash-tag from the URL. You can then write an if statement like this:

 if(location.hash === "#2"){
     $("#one").hide();
 }else{
     $("#two").hide();
 }

Or directly as a copy and paste example:

<html>
<script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
    if(location.hash === "#2"){
        $("#one").hide();
    }else{
        $("#two").hide();
    }
    $('#mybutton').click(function(e) { 
        $("ul").toggle(); //quick n dirty! only works with 2 lists :)
        e.preventDefault();
    });
});
</script>
<body>
<a href="#" id="mybutton">My button</a>

<ul id="one">
  <li>First Item!</li>
  <li>blah</li>
  <li>blah2</li>
</ul>

<ul id="two">
  <li>Second Item!</li>
  <li>blah</li>
  <li>blah2</li>
</ul>

<a href="#2">To second page (you might have to refresh, notice the #2 at the end of the url!)</a>
​</body>
</html>

Also notice I've inserted a e.preventDefault(); at #mybutton's click listener to prevent the URL changing back on clicking.

Upvotes: 1

Squirkle
Squirkle

Reputation: 933

If I am understanding you correctly, perhaps you can accomplish this via a page wrap with a unique id per page? You can swap the id out with JS or server side logic, depending on what you're trying to do.

<div id="page-one">
    <ul id="one">
      <li>blah</li>
      <li>blah2</li>
    </ul>

    <ul id="two">
      <li>blah</li>
      <li>blah2</li>
    </ul>
</div>

then your css will be #page-one #one { display:block }; #page-two #one { display : none }; etc.

Upvotes: 1

Related Questions