Question

我需要知道如何在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();
    });

我的目标是，当doc最初加载时，将显示与当前星期相对应的div

Answer 1

试试这个：

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');
})

Answer 2

我修改了你的getHandler（）以返回一个值

js代码如下：

function getHandler() {
    var days =  ['sun','mon','tue','wed','thu','fri','sat'],
        handler = null,
        d = new Date(),
        today = d.getDay();

    for (x=0; x<days.length; x++) {
        if ( x === today ) { handler = days[x]; }
    }
    return handler;
}

$(document).delegate('[data-role="navbar"] a', 'click', function () {
    $(this).addClass('ui-btn-active');
    $('.content_div').hide();
    $('#' + $(this).attr('data-href')).show();
});

function displayTodayDiv() {
    var h = getHandler();
    $('.content_div').hide();
   $("#"+h).show();
}

$(document).ready(displayTodayDiv);

如何在jquery中显示页面加载div

2 个答案: