Split page into many numbered Divs and reload whole page when clicking to show the hidden div

Question

My code:

<div class="content_1">    
//Content of first page goes
</div>
<div class="content_2" style="display:none;">
//Content of second page goes here
</div>
<div class="content_3" style="display:none;">
//Third page content goes here
</div>

<p>Pages: 
<a href="#" class="button_1"> 1</a>
<a href="#" class="button_2"> 2</a>
<a href="#" class="button_3"> 3</a></p>
<div class="clearLeft"></div>


<script type="text/javascript">
$(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");
});
});
</script>

I want to refresh the page on clicking the buttons and show the hidden div. I tried many things but the result was page reload and show the first div again whatever button chosen.

Edit: Code above is working well with Jquery library. I want to add extra property to the code. I want page reloads when clicking buttons and keep the div shown.

Example: When click on button "2" I want page to be reloaded and show "//Content of second page goes here"

you have to store some value somewhere (may be a cookie, a querystring.. something) to show the hidden div. — Venkata Krishna, Dec 25 '13 at 06:57
What do you mean with page refresh? If you refresh page you need to get some params from url and show specified div by using that url param. Please explain more, because your code is working as you said http://jsfiddle.net/cubuzoa/Vmtbt/ — Hüseyin BABAL, Dec 25 '13 at 07:03
thanks for giving a hand. Please see the edited part of the question for more illustration — Mouneer, Dec 25 '13 at 15:40

score 0 · Answer 1 · answered Dec 25 '13 at 07:16

0

Its working just use this line in top of your page

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

answered Dec 25 '13 at 07:16

Meghendra S Yadav

134
6

mehmetakifalp · Accepted Answer · 2013-12-25T08:32:49.913

0

try jSCookie

I did,

  var clickedLink = getCookie('getClickedLink');
  if(clickedLink){
  $("button:eq(" + (parseInt(clickedLink) -1) + ")").addClass('tiklandi');
  }

  $("button").on('click', function(){
      $(this).addClass('tiklandi');
      var tikTik = $(this).attr('rel');
      setCookie("getClickedLink", tikTik);
  });

Check it http://jsfiddle.net/2dn9q/1/

edited Dec 25 '13 at 08:32

answered Dec 25 '13 at 07:20

mehmetakifalp

445
5
16

1

`live` has been deprecated for quite a long time now and also doesn't exist in current version of jQUery http://api.jquery.com/live/ – charlietfl Dec 25 '13 at 08:14
thank you for atttention. I replaced on() – mehmetakifalp Dec 25 '13 at 08:33
1

I added the above code but page don't reload. thanks for giving a hand. Please see the edited part of the question for more illustration – Mouneer Dec 25 '13 at 15:46

Split page into many numbered Divs and reload whole page when clicking to show the hidden div

2 Answers2