Question

我正在使用标签页功能，我想默认显示第一个标签页处于活动状态

<div class="col-md-12">
    <div class="row quick-filters js-quick-filters">
        <a href="${allOpenOrder}" class="allOpenOrder"><spring:theme code="text.retailer.dashboard.order.all" arguments="${allOrderCount}" />&nbsp;</a>
        <a href="${acceptOrrejectOrder}" class="acceptOrrejectOrder"><spring:theme code="text.retailer.dashboard.order.accept.reject" arguments="${acceptOrrejectOrderCount}" />&nbsp;</a>
        <a href="${pickupOrder}" class="pickupOrder"><spring:theme code="text.retailer.dashboard.order.awaiting.pickup" arguments="${pickupOrderCount}" />&nbsp;</a>
        <a href="${deliveryOrder}" class="deliveryOrder"><spring:theme code="text.retailer.dashboard.order.awaiting.delivery" arguments="${deliveryOrderCount}" />&nbsp;</a>
        <a href="${paymentOrder}" class="paymentOrder"><spring:theme code="text.retailer.dashboard.order.request.payment" arguments="${paymentOrderCount}" />&nbsp;</a>
    </div>
</div>


var currentPath = location.pathname + location.search;
$('.js-quick-filters>a').each(function () {
    if ($(this).attr('href') === currentPath) {
        $(this).addClass('activeTab');
    } else {
        $(this).removeClass('activeTab');
    }
});

默认情况下，第一个标签应处于活动状态

Answer 1

var currentPath = location.pathname + location.search;
$('.js-quick-filters>a:eq(0)').addClass('activeTab');
$('.js-quick-filters>a').each(function () {
    if ($(this).attr('href') === currentPath) {
        $(this).addClass('activeTab');
    } else {
        $(this).removeClass('activeTab');
    }
});

Answer 2

只需将类添加到您的html中即可。

<div class="col-md-12">
    <div class="row quick-filters js-quick-filters">
        <a href="${allOpenOrder}" class="allOpenOrder activeTab"><spring:theme code="text.retailer.dashboard.order.all" arguments="${allOrderCount}" />&nbsp;</a>
        <a href="${acceptOrrejectOrder}" class="acceptOrrejectOrder"><spring:theme code="text.retailer.dashboard.order.accept.reject" arguments="${acceptOrrejectOrderCount}" />&nbsp;</a>
        <a href="${pickupOrder}" class="pickupOrder"><spring:theme code="text.retailer.dashboard.order.awaiting.pickup" arguments="${pickupOrderCount}" />&nbsp;</a>
        <a href="${deliveryOrder}" class="deliveryOrder"><spring:theme code="text.retailer.dashboard.order.awaiting.delivery" arguments="${deliveryOrderCount}" />&nbsp;</a>
        <a href="${paymentOrder}" class="paymentOrder"><spring:theme code="text.retailer.dashboard.order.request.payment" arguments="${paymentOrderCount}" />&nbsp;</a>
    </div>
</div>

这将默认使第一个选项卡处于活动状态。

默认情况下如何使第一个选项卡处于活动状态？

2 个答案: