Question

在下面的示例中为preActNav按钮添加一个监听器似乎打破了jQuery Mobile的默认css，它在点击事件上绘制了蓝色按钮。

我做错了还是有更本土的方式。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="jquery.mobile/jquery.mobile.css" /> 
    <script type="text/javascript" src="jquery.mobile/jquery.js"></script>
    <script type="text/javascript" src="jquery.mobile/jquery.mobile.js"></script>
</head>
<body>

<div data-role="page" id="mainmenu">
    <div data-role="header" data-position="inline">
    <h1>Main Menu</h1>
    </div>
    <div class="ui-body ui-body-c">
    <div data-role="content">   

    <div data-role="navbar">
    <ul>
        <li><a href="#" data-theme="a"  data-seq='A' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavA">A</a></li>
        <li><a href="#" data-theme="a"  data-seq='B' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavB">B</a></li>
        <li><a href="#" data-theme="a"  data-seq='C' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavC">C</a></li>
        <li><a href="#" data-theme="a"  data-seq='D' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavD">D</a></li>
        <li><a href="#" data-theme="a"  data-seq='E' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavE">E</a></li>
        <li><a href="#" data-theme="a"  data-seq='F' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavF">F</a></li>
    </ul>
    </div>  

    <div id='groupA' class='preGroups'> 
        This is Group A</div>

        <div id='groupB' class='preGroups'> 
        This is Group B</div>

        <div id='groupC' class='preGroups'> 
        This is Group C</div>

        <div id='groupD' class='preGroups'> 
        This is Group D</div>

        <div id='groupE' class='preGroups'> 
        This is Group E</div>

        <div id='groupF' class='preGroups'> 
        This is Group F</div>

    </div>
</body>
</html>         

<script>        


$(document).ready(function () {


    /* Add a listner to Pre-Close Group buttons */
    $('a.preActNav').click(function() {         
        var group = ($(this).data('seq'));      
        currentTab = group;             
        $('.preGroups').hide();
        $('#group' + group).show();     
        return false;
    });         

});

</script>

Answer 1

该事件监听器中的return false;正在停止应用该样式的“OS”事件。

请参阅JavaScript: event.preventDefault() vs return false。

最好不要这样做，但如果你因某些原因必须阻止其他处理程序，你可以手动应用这种风格：

/* Add a listner to Pre-Close Group buttons */
$('a.preActNav').click ( function () {
    $('a.preActNav').removeClass ('ui-btn-active');
    $(this).addClass ('ui-btn-active');

    var group = ($(this).data('seq'));
    currentTab = group;
    $('.preGroups').hide();
    $('#group' + group).show();
    return false;
} );

See it at jsFiddle.

Answer 2

这有效......

演示：http://jsfiddle.net/wdm954/9BRMk/3

$('a.preActNav').click(function() {      
    $('.preGroups').hide();
    var id = '#group' + $(this).attr('data-seq');
    $(id).show();
});

jquery mobile -adding listener打破了本机点击行为

2 个答案: