单击以显示隐藏的内容时，将页面分为多个编号的Divs并重新加载整个页面

Question

我的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<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。

上面的代码运行良好。 我想在代码中添加额外的属性。 我要在单击按钮时重新加载页面并保持div保持显示状态。

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

编辑：非常感谢@ Jan-Drewniak，但是您的想法只能解决一半问题。 当我输入http：// mysite.com＃button_3作为URL时，页面将加载第一个div而不是第三个div。 我希望我可以将此网址用于第三个网址，因为我想通过按钮使用此Javascript

<script>
function refreshPage(){
    window.location.href = "#button_3";
    window.location.reload();
} 
</script>

因为我认为这可以满足我的需求。

Answer 1

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

Answer 2

您只是错过了包含所需的jquery.js。 有用。

<script src="js/jquery.js"></script>

Answer 3

通常，您似乎试图制作选项卡式内容。 javascript方法是使用location.hash选择要在页面上显示的内容，因此以#content_1结尾的url将显示id为content_1的div。

不过，这可以通过CSS使用:target选择器来完成。

这是一个有关如何实现所需效果的很好的教程，它达到了在用户重新加载页面时显示正确内容的目的。

https://hacks.mozilla.org/2012/02/a-simple-image-gallery-using-only-css-and-the-target-selector/

如果您仍然想使用javascript方法，可以将按钮更改为：

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

然后在你的javascript中使用它

var urlHash = window.location.hash
$(urlHash).trigger('click')

并在其余jquery选择器.button_2 .button_3 .button_1 .button_2 .button_3为#button_1 #button_2 #button_3 。

编辑

好吧，如果我对上面的建议不清楚，这是如何在代码中实现window.location.hash行为。 重要的是在定义click函数之后调用此函数。

这应该可以解决您的问题：

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

var urlHash = window.location.hash
$(urlHash).trigger('click')

});
</script>

ps我将内容类更改为id，因此您需要相应地更新css。

Answer 4

在此处查看演示

请在您的html页面的头部添加此链接。

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