Вкладки пользовательского интерфейса jQuery в будний день открываются в текущий день

#jquery-ui #tabs #weekday

#jquery-пользовательский интерфейс #вкладки #день недели

Вопрос:

У меня есть следующие вкладки пользовательского интерфейса jQuery в будний день, которые я хочу открыть в текущий день недели:

 <div id="tabs">
<ul>
    <li><a href="monday.php">Monday</a></li>
    <li><a href="tuesday.php">Tuesday</a></li>
    <li><a href="wednesday.php">Wednesday</a></li>
    <li><a href="thursday.php">Thursday</a></li>
    <li><a href="friday.php">Friday</a></li>
    <li><a href="saturday.php">Saturday</a></li>
    <li><a href="sunday.php">Sunday</a></li>
</ul>
  

 <script type="text/javascript">
$(function() {
    $( "#tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. "  
                    "If this wouldn't be a demo." );
            }
        }
    });
});
</script>
  

Я хочу, чтобы вкладки открывались в текущий день недели, я знаю, что что-то вроде этого работает:

 .eq((new Date().getDay() || 7) - 1).click();
  

Но не могу заставить его работать и был бы признателен за помощь. Кроме того, я бы хотел, чтобы на вкладке текущего дня отображалось слово «Сегодня» вместо дня недели.

Я был бы признателен за помощь.

Спасибо,

Брендон

Ответ №1:

Вы можете использовать следующее для select вкладки, соответствующей текущему дню:

 $('#tabs').tabs('select', ((new Date().getDay() || 7) - 1));
  

и вы можете изменить текст активной вкладки следующим образом:

 $('#tabs .ui-state-active a').text('Today');
  

HTML

 <div id="tabs">
    <ul>
        <li><a href="monday.php">Monday</a></li>
        <li><a href="tuesday.php">Tuesday</a></li>
        <li><a href="wednesday.php">Wednesday</a></li>
        <li><a href="thursday.php">Thursday</a></li>
        <li><a href="friday.php">Friday</a></li>
        <li><a href="saturday.php">Saturday</a></li>
        <li><a href="sunday.php">Sunday</a></li>
    </ul>
</div>
  

JavaScript

 $('#tabs').tabs();
$('#tabs').tabs('select', ((new Date().getDay() || 7) - 1));
$('#tabs .ui-state-active a').text('Today');
  

и нуждается в библиотеках пользовательского интерфейса jQuery и jQuery.

ДЕМОНСТРАЦИЯ