jquery.mobile中常见问题

1、jqm导航栏的样式控制其href值须以“#”开头？

     默认地，jquery.mobile的导航栏中的链接会自动转换为按钮（无需 data-role="button"）。当导航栏中的链接被敲击时，会获得选取外观（按下）。如需在不敲击链接时实现此外观，请使用 class="ui-btn-active"：

<div data-role="navbar">
<ul id='navul'>
<li><a href="javascript:void(0)" tid=0 class="ui-btn-active">广告</a></li>
<li><a href="javascript:void(0)" tid=1>电视购物</a></li>
<li><a href="javascript:void(0)" tid=2>电视剧</a></li>
</ul>
</div>

有时候，我们需要通过JS来控制鼠标点击后的样式，如下

<script>
$(function () {  
    $("#navul li a").on("tap",function(){
	   tid = $(this).attr('tid');
	   $("#navul li a").removeClass('ui-btn-active');
	   $(this).addClass('ui-btn-active');   	   
    })
    
});
</script>

那么以上代码在FF下经过调试，当鼠标按下后ui-btn-active被加载到class属性中，当鼠标离开后，ui-btn-active自动被删，后来把href的值改为如下就可以了

<div data-role="navbar">
<ul id='navul'>
<li><a href="#" tid=0 class="ui-btn-active">广告</a></li>
<li><a href="#" tid=1>电视购物</a></li>
<li><a href="#" tid=2>电视剧</a></li>
</ul>
</div>

所以问题的焦点是在href的值，我们用原生态的JS来看看效果

<a href="javascript:void(0)" id="t1">测试</a>
<script type="text/javascript">
document.getElementById("t1").style.backgroundColor="#FF0000"; //设置背景颜色
document.getElementById("t1").style.padding="15px"; //设置设置内边距
document.getElementById("t1").style.width="50px"; //设置宽
document.getElementById("t1").style.height="40px"; //设置高
document.getElementById("t1").style.borderStyle="solid"; //设置边框样式
document.getElementById("t1").style.borderWidth="2px"; //设置边框线宽度
document.getElementById("t1").style.borderColor="#000000"; //设置边框线颜色
</script>

再将href换为#看看效果，可以看出，无论是javascript:void(0)还是#，其效果都是一样的。