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结尾的网址会显示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_1 .button_2 .button_3更改为#button_1 #button_2 #button_3。

修改

好的，如果我不清楚上述建议，下面是如何在代码中实现window.location.hash行为。在定义了单击函数之后调用它是很重要的。

这可以解决您的问题：

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

P.S。我将内容类更改为ID，因此您需要相应地更新您的CSS。

Answer 4

See the Demo here

请在html页面的head部分中包含此链接。

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

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

4 个答案: