This question already has an answer here:
Split post into many numbered Divs and reload whole page when clicking to show the hidden content
(1个答案)
4年前关闭。
我的代码:
我想在单击按钮时刷新页面并显示隐藏的div。我尝试了很多事情,但结果是页面重新加载,无论选择什么按钮,都再次显示第一个div。
编辑:上面的代码与Jquery库一起很好地工作。我想在代码中添加额外的属性。我要在单击按钮时重新加载页面并保持div保持显示状态。
示例:当单击按钮“ 2”时,我希望重新加载页面并显示“ //第二页的内容在这里”
检查http://jsfiddle.net/2dn9q/1/
(1个答案)
4年前关闭。
我的代码:
<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>
我想在单击按钮时刷新页面并显示隐藏的div。我尝试了很多事情,但结果是页面重新加载,无论选择什么按钮,都再次显示第一个div。
编辑:上面的代码与Jquery库一起很好地工作。我想在代码中添加额外的属性。我要在单击按钮时重新加载页面并保持div保持显示状态。
示例:当单击按钮“ 2”时,我希望重新加载页面并显示“ //第二页的内容在这里”
最佳答案
尝试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);
});
检查http://jsfiddle.net/2dn9q/1/
关于javascript - 单击以显示隐藏的div时,将页面分成多个编号的Div,然后重新加载整个页面,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20769947/