我需要知道如何在 jQuery Mobile 的页面加载时显示特定的 div(不是页面,只是 div)。这是 HTML:
<div data-role="page">
<div data-role="navbar">
<ul>
<li><a href="#" data-href="sun">Sun</a></li>
<li><a href="#" data-href="mon">Mon</a></li>
<li><a href="#" data-href="tue">Tue</a></li>
<li><a href="#" data-href="wed">Wed</a></li>
<li><a href="#" data-href="thu">Thu</a></li>
<li><a href="#" data-href="fri">Fri</a></li>
<li><a href="#" data-href="sat">Sat</a></li>
</ul>
</div><!-- /navbar -->
<div id="sun" class="content_div">Sunday</div>
<div id="mon" class="content_div">Monday</div>
<div id="tue" class="content_div">Tuesday</div>
<div id="wed" class="content_div">Wednesday</div>
<div id="thu" class="content_div">Thursday</div>
<div id="fri" class="content_div">Friday</div>
<div id="sat" class="content_div">Saturday</div>
</div>
我使用 jQuery 来协商选项卡,因此我的 JS 位于 jQuery Mobile 源调用之上。这是代码:
function getHandler(handler) {
var days = ['sun','mon','tue','wed','thu','fri','sat'],
d = new Date(),
today = d.getDay();
for (x=0; x<days.length; x++) {
if ( x === today ) { handler = days[x]; }
}
}
$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show();
});
我的目标是当文档最初加载时,将显示与当前星期几相对应的 div
最佳答案
试试这个:
function getHandler() {
var days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
d = new Date(),
today = d.getDay();
return days[today];
}
$(document).delegate('[data-role="navbar"] a', 'click', function() {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show();
});
$(document).ready(function(){
$('[data-href="' + getHandler() + '"]').trigger('click');
})
关于jquery - 如何在jquery中的页面加载时显示div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9595568/