gpt4 book ai didi

css - jquery mobile - 添加监听器会破坏 native 点击行为

转载 作者:太空宇宙 更新时间:2023-11-04 16:18:27 25 4
gpt4 key购买 nike

在下面的示例中向 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>

最佳答案

该事件监听器中的 return false; 正在阻止“操作系统”事件应用样式。

参见 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.

关于css - jquery mobile - 添加监听器会破坏 native 点击行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7061096/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com