Question

我正在尝试使用jquery mobile创建一个新的网络移动设备。当我通过点击按钮（从1-10开始）从#page1移动到#page2时，按钮设置为黑色，当我从第{1}页的#page2点击“返回”时不再是黑人了。我实际上想要记住，当我点击我之前点击过的按钮时。

还有一件事。当我点击第1页中的按钮（例如按钮3）时，第2页中的按钮3处于活动状态（黑色）并且他不应该处于活动状态。我希望它不活跃。

我的代码：

<div dir="rtl" id="page" data-role="page">
    <div class="fiveButtons" style="margin-bottom:10px float:left "> 
        <div class="b"><a class="c" id="a10" data-p1="10" data-role="button" data-inline="true" style="margin: 1px;"  onclick="showFrontLayer5a(6)"> 6 </a> </div>  
        <div class="b"><a class="c" id="a9" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5a(7)"> 7 </a></div>
        <div class="b"><a class="c" id="a8" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5a(8)"> 8 </a></div>
        <div class="b"><a class="c" id="a7" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5a(9)"> 9 </a></div>
        <div class="b"><a class="c" id="a6" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5a(10)"> 10 </a></div> 
        </div>              
    <div data-role="content" class="gapdiv"></div>
    <div class="fiveButtons"  style="margin-bottom:10px float:left "> 
        <div class="b"><a class="c"  id="a5" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5a(1)"> 1 </a> </div>  
        <div class="b"><a class="c" id="a4" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5a(2)"> 2 </a></div>
        <div class="b"><a class="c" id="a3" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5a(3)"> 3 </a></div>
        <div class="b"><a class="c" id="a2" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5a(4)"> 4 </a></div>
        <div class="b"><a class="c" id="a1" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5a(5)"> 5 </a></div> 
    </div>    
</div>
<div dir="rtl" id="page2" data-role="page">
    <div class="fiveButtons" style="margin-bottom:10px float:left "> 
        <div class="b"><a class="c" id="b10" data-p1="10" data-role="button" data-inline="true" style="margin: 1px;"  onclick="showFrontLayer5a(6)"> 6 </a> </div>  
        <div class="b"><a class="c" id="b9" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5b(7)"> 7 </a></div>
        <div class="b"><a class="c" id="b8" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5b(8)"> 8 </a></div>
        <div class="b"><a class="c" id="b7" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5b(9)"> 9 </a></div>
        <div class="b"><a class="c" id="b6" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5b(10)"> 10 </a></div> 
    </div>              
    <div data-role="content" class="gapdiv"></div>
    <div class="fiveButtons"  style="margin-bottom:10px float:left "> 
        <div class="b"><a class="c"  id="b5" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5b(1)"> 1 </a> </div>  
        <div class="b"><a class="c" id="b4" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5b(2)"> 2 </a></div>
        <div class="b"><a class="c" id="b3" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5b(3)"> 3 </a></div>
        <div class="b"><a class="c" id="b2" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5b(4)"> 4 </a></div>
        <div class="b"><a class="c" id="b1" data-role="button" data-inline="true" style="margin: 1px;" onclick="showFrontLayer5b(5)"> 5 </a></div> 
    </div>     
</div>    
<script>
    function showFrontLayer5a(a) {
        q3b=a;
        var url="http://111.11.11.11/#page2";
        window.setTimeout(function(){window.open(url,'_self');
        window.scrollTo(0, 0);},500);
    }
</script>    
<style>
    .fiveButtons .c:active{
        color:#ffffff;
    }
</style>

请你提出建议， MOR

Answer 1

您可以使用Cookie来保存点击的按钮，并在您通过阅读Cookie返回时将其设置为黑色。问题是，当页面加载时，jquery更改的所有css都会重置。要保存它，请使用cookie。

记住按钮单击页面过渡

1 个答案: