Question

我想点击按钮刷新页面并显示隐藏的div。我的下面代码运行良好。我想在代码中添加额外的属性。我想在单击按钮时重新加载页面并保持显示所选的div。示例：当单击按钮“2”时，我希望首先重新加载页面，然后再显示“//第二页的内容进入此处”

我的代码：

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

Answer 1

在研究了Web开发之后，我发现很容易实现这一点！以下是我的问题的答案：

<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并在点击时重新加载整个页面以显示隐藏的内容

1 个答案: