Javascript 将页面拆分为多个编号的div，并在单击以显示隐藏div时重新加载整个页面

我的代码：

<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>

//第一页的内容将被删除
//第二页的内容在这里
//第三页内容在这里
页码：

$（文档）.ready（函数（）{
var a=200；
$（'.button_1'）.css（“背景色”，“00CCFF”）；
$（'.button_1'）。单击（函数（）{
$（'.content_1'）.fadeIn（a）；
$（'.content_2'）.fadeOut（）；
$（'.content_3'）.fadeOut（）；
$（'.content_4'）.fadeOut（）；
$（'.button_1'）.css（“背景色”，“00CCFF”）；
$（'.button_2'）.css（“背景色”，“#99FF99”）；
$（'.button_3'）.css（“背景色”，“#99FF99”）；
$（'.button_4'）.css（“背景色”，“#99FF99”）；
});
$（'.button_2'）。单击（函数（）{
$（'.content_1'）.fadeOut（）；
$（'.content_2'）.fadeIn（a）；
$（'.content_3'）.fadeOut（）；
$（'.content_4'）.fadeOut（）；
$（'.button_2'）.css（“背景色”，“00CCFF”）；
$（'.button_1'）.css（“背景色”，“#99FF99”）；
$（'.button_3'）.css（“背景色”，“#99FF99”）；
$（'.button_4'）.css（“背景色”，“#99FF99”）；
});
$（'.button_3'）。单击（函数（）{
$（'.content_1'）.fadeOut（）；
$（'.content_2'）.fadeOut（）；
$（'.content_3'）.fadeIn（a）；
$（'.content_4'）.fadeOut（）；
$（'.button_3'）.css（“背景色”，“00CCFF”）；
$（'.button_1'）.css（“背景色”，“#99FF99”）；
$（'.button_2'）.css（“背景色”，“#99FF99”）；
$（'.button_4'）.css（“背景色”，“#99FF99”）；
});
});

我想在点击按钮时刷新页面并显示隐藏的div。我尝试了很多方法，但结果是页面重新加载并再次显示第一个div，无论选择什么按钮

编辑：上面的代码与Jquery库配合得很好。我想在代码中添加额外的属性。我希望在单击按钮时重新加载页面，并保持div显示

---

示例：当单击按钮“2”时，我希望重新加载页面并显示“//第二页的内容在此处”

其工作原理就是在页面顶部使用这一行

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

试试jSCookie

是的

  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);
  });

---

检查它

您必须在某个地方存储一些值（可能是cookie、查询字符串……等等）以显示隐藏的div。页面刷新是什么意思？若你们刷新页面，你们需要从url获取一些参数，并使用那个url参数显示指定的div。请进一步解释，因为您的代码正在工作，正如您所说，我想您并没有引用jQuery库；）谢谢你帮忙。请参阅问题的编辑部分以了解更多说明

live

已经被弃用了很长一段时间，并且在当前版本的jQUery中也不存在。谢谢关注。我添加了上面的代码，但页面没有重新加载。谢谢你帮忙。有关更多说明，请参见问题的编辑部分