在jQuery Mobile的导航栏中选择未正确进行

问题描述

<script type="text/javascript">
    function jWdShowPage1() {
        $('#page1').show();
        $('#page2').hide();
        $('#page3').hide();
    }

   function jWdShowPage2() {
        $('#page2').show();
        $('#page1').hide();
        $('#page3').hide();
    }

    function jWdShowPage3() {
        $('#page3').show();
        $('#page1').hide();
        $('#page2').hide();
    } //jWdShowPage3
</script>

<div data-role="content" id="page1">
<ul id="navList">
       <li><a href="" onclick="jWdShowPage1(this); return false;" data-theme="a" data-icon="star" class="ui-btn-active"><%=GetLocalResourceObject("page1Text") %></a></li>
            <li><a href="" onclick="jWdShowPage2(this); return false;" data-theme="a" data-icon="grid"><%=GetLocalResourceObject("page2Text") %></a></li>
            <li><a href="" onclick="jWdShowPage3(this); return false;" data-theme="a" data-icon="gear"><%=GetLocalResourceObject("page3Text") %></a></li>
</ul>
<div>
This div content here
</div>
</div>

<div id="page2" style="display: none;">
<ul id="navList">
       <li><a href="" onclick="jWdShowPage1(this); return false;" data-theme="a" data-icon="star" class="ui-btn-active"><%=GetLocalResourceObject("page1Text") %></a></li>
            <li><a href="" onclick="jWdShowPage2(this); return false;" data-theme="a" data-icon="grid"><%=GetLocalResourceObject("page2Text") %></a></li>
            <li><a href="" onclick="jWdShowPage3(this); return false;" data-theme="a" data-icon="gear"><%=GetLocalResourceObject("page3Text") %></a></li>
</ul>
<div>
This div content here
</div>

<div id="page3" style="display: none;">
<ul id="navList">
       <li><a href="" onclick="jWdShowPage1(this); return false;" data-theme="a" data-icon="star" class="ui-btn-active"><%=GetLocalResourceObject("page1Text") %></a></li>
            <li><a href="" onclick="jWdShowPage2(this); return false;" data-theme="a" data-icon="grid"><%=GetLocalResourceObject("page2Text") %></a></li>
            <li><a href="" onclick="jWdShowPage3(this); return false;" data-theme="a" data-icon="gear"><%=GetLocalResourceObject("page3Text") %></a></li>
</ul>
<div>
This div content here
</div>
</div>

In that problem i am facing


1) Click second button in the navbar.

2) Second page content comes properly and the second button stays selected.

3) Click first button in the navbar.

4) first page display properly,but first button is not in selected state

5) Again click first button.

6) Now first button is in selected state.

推荐答案

这篇关于在jQuery Mobile的导航栏中选择未正确进行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！