Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Generally, It looks like your trying to make tabbed content. The javascript approach would be to use <code>location.hash</code> to select which content to show on the page, so a url ending with <code>#content_1</code> would display the div with an id of <code>content_1</code>. </p> <p>This can be done with CSS though, using the <code>:target</code> selector. </p> <p>Here is a pretty good tutorial on how to achieve the desired effect, and it achieves the goal of showing the correct content when the user reloads the page. </p> <p><a href="https://hacks.mozilla.org/2012/02/a-simple-image-gallery-using-only-css-and-the-target-selector/" rel="nofollow">https://hacks.mozilla.org/2012/02/a-simple-image-gallery-using-only-css-and-the-target-selector/</a></p> <p>If you want to stick with the javascript approach though, you can change the buttons to this:</p> <pre><code>&lt;p&gt;Pages: &lt;a href="#button_1" id="button_1"&gt; 1&lt;/a&gt; &lt;a href="#button_2" id="button_2"&gt; 2&lt;/a&gt; &lt;a href="#button_3" id="button_3"&gt; 3&lt;/a&gt;&lt;/p&gt; </code></pre> <p>and then use this in your javascript</p> <pre><code>var urlHash = window.location.hash $(urlHash).trigger('click') </code></pre> <p>and change the <code>.button_1</code> <code>.button_2</code> <code>.button_3</code> to <code>#button_1</code> <code>#button_2</code> <code>#button_3</code>in the rest of the jquery selectors. </p> <p><strong>EDIT</strong></p> <p>alright, in case I wasn't clear with the above suggestion, here's how to implement the <code>window.location.hash</code> behaviour in your code. It's important that this gets called after the click functions have already been defined. </p> <p>This should solve your problem:</p> <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt; &lt;/script&gt; &lt;div id="content_1"&gt; //Content of first page goes &lt;/div&gt; &lt;div id="content_2" style="display:none;"&gt; //Content of second page goes here &lt;/div&gt; &lt;div id="content_3" style="display:none;"&gt; //Third page content goes here &lt;/div&gt; &lt;p&gt;Pages: &lt;a href="#button_1" id="button_1"&gt; 1&lt;/a&gt; &lt;a href="#button_2" id="button_2"&gt; 2&lt;/a&gt; &lt;a href="#button_3" id="button_3"&gt; 3&lt;/a&gt;&lt;/p&gt; &lt;div class="clearLeft"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ var a = 200; $('#button_1').css("background-color","#00CCFF"); $('#button_1').click(function(){ $('#content_1').fadeIn(a); $('#content_2').fadeOut(); $('#content_3').fadeOut(); $('#content_4').fadeOut(); $('#button_1').css("background-color","#00CCFF"); $('#button_2').css("background-color","#99FF99"); $('#button_3').css("background-color","#99FF99"); $('#button_4').css("background-color","#99FF99"); }); $('#button_2').click(function(){ $('#content_1').fadeOut(); $('#content_2').fadeIn(a); $('#content_3').fadeOut(); $('#content_4').fadeOut(); $('#button_2').css("background-color","#00CCFF"); $('#button_1').css("background-color","#99FF99"); $('#button_3').css("background-color","#99FF99"); $('#button_4').css("background-color","#99FF99"); }); $('#button_3').click(function(){ $('#content_1').fadeOut(); $('#content_2').fadeOut(); $('#content_3').fadeIn(a); $('#content_4').fadeOut(); $('#button_3').css("background-color","#00CCFF"); $('#button_1').css("background-color","#99FF99"); $('#button_2').css("background-color","#99FF99"); $('#button_4').css("background-color","#99FF99"); }); var urlHash = window.location.hash $(urlHash).trigger('click') }); &lt;/script&gt; </code></pre> <p>p.s. I changed the content classes to ids, so you'll need to update your css accordingly. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload