将帖子拆分成许多编号的Div，并在点击显示隐藏内容时重新加载整个页面 [英] Split post into many numbered Divs and reload whole page when clicking to show the hidden content
本文介绍了将帖子拆分成许多编号的Div，并在点击显示隐藏内容时重新加载整个页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要在点击按钮时刷新页面，并显示隐藏的div。
我的代码下面是工作很好。我想为代码添加额外的属性。我想要页面重新加载时，单击按钮，并保持所选的div显示。
例如：当点击按钮2时，我想要页面先被重新加载，然后第二个显示//第二页的内容在这里
I want to refresh the page on clicking the buttons and show the hidden div. My code below is working well. I want to add extra property to the code. I want page reloads when clicking buttons and keep the chosen div shown. Example: When click on button "2" I want page first to be reloaded and second to show "//Content of second page goes here"
代码：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="content_1">
//Content of first page goes here
</div>
<div id="content_2" style="display:none;">
//Content of second page goes here
</div>
<div id="content_3" style="display:none;">
//Third page content goes here
</div>
<p style="font-weight:bold;">Pages:
<a href="#button_1" id="button_1"> 1</a>
<a href="#button_2" id="button_2"> 2</a>
<a href="#button_3" id="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");
});
$('#button_4').click(function(){
$('#content_1').fadeOut();
$('#content_2').fadeOut();
$('#content_3').fadeOut(a);
$('#content_4').fadeIn();
$('#button_4').css("background-color","#00CCFF");
$('#button_1').css("background-color","#99FF99");
$('#button_2').css("background-color","#99FF99");
$('#button_3').css("background-color","#99FF99");
});
});
</script>
<script>
var urlHash = window.location.hash
$(urlHash).trigger('click')
</script>
<style>
.pages
{
position:relative;
top:20px;
font:1.1em Arial, Helvetica, sans-serif;
color:#000033;
font-weight:bold;
width:200px;
margin:0px auto;
}
.pages ul
{
marging:0px;
padding:0px;
}
.pages li
{
list-style-type:none;
float:left;
margin-left:5px;
}
.pages li a
{
padding:5px 7px 7px 5px;
border:1px solid #999999;
background-color:#99FF99;
text-decoration:none;
display:block;
}
.pages li a:hover
{
background-color: #00CCFF;
}
.clearLeft
{
clear:left;
}
.clearRight
{
clear:right;
}
</style>
推荐答案
完成这个！这是我的问题的答案：
After studying web development, I found it very easy to accomplish this! Here is the answer for my question:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="content_1">
//Content of first page goes here
</div>
<div id="content_2" style="display:none;">
//Content of second page goes here
</div>
<div id="content_3" style="display:none;">
//Third page content goes here
</div>
<p id ="container" style="font-weight:bold;" >Pages:
<a href="#button_1" id="button_1"> 1</a>
<a href="#button_2" id="button_2"> 2</a>
<a href="#button_3" id="button_3"> 3</a>
</p>
<div class="clearLeft"></div>
<script type="text/javascript">
$(document).ready(function(){
$('#container').click(function(){
location.reload();
});
var hashes = window.location.href.split('#');
var index = hashes[1].split('_')[1];
var a = 200;
if(index == 1){
$('#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");
}else if(index == 2){
$('#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");
}else if(index == 3){
$('#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");
}else if (index == 4) {
$('#content_1').fadeOut();
$('#content_2').fadeOut();
$('#content_3').fadeOut(a);
$('#content_4').fadeIn();
$('#button_4').css("background-color","#00CCFF");
$('#button_1').css("background-color","#99FF99");
$('#button_2').css("background-color","#99FF99");
$('#button_3').css("background-color","#99FF99");
};
});
</script>
<style>
.pages
{
position:relative;
top:20px;
font:1.1em Arial, Helvetica, sans-serif;
color:#000033;
font-weight:bold;
width:200px;
margin:0px auto;
}
.pages ul
{
marging:0px;
padding:0px;
}
.pages li
{
list-style-type:none;
float:left;
margin-left:5px;
}
.pages li a
{
padding:5px 7px 7px 5px;
border:1px solid #999999;
background-color:#99FF99;
text-decoration:none;
display:block;
}
.pages li a:hover
{
background-color: #00CCFF;
}
.clearLeft
{
clear:left;
}
.clearRight
{
clear:right;
}
</style>
这篇关于将帖子拆分成许多编号的Div，并在点击显示隐藏内容时重新加载整个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
