vertical - Las pestañas jQuery UI del día de la semana se abren en el día actual

jquery vertical tabs

Question

Tengo las pestañas jQuery UI del día de la semana de la siguiente manera, que quiero abrir en el día de la semana actual:

<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>

Quiero que las pestañas se abran en el día actual de la semana, sé que algo así funciona:

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

Pero no puedo hacer que funcione y agradecería algo de ayuda. Además, me gustaría que la pestaña del día actual muestre la palabra "Hoy" en lugar del día de la semana.

Agradecería algo de ayuda.

Gracias,

Brendon

Answer 1

Puede usar lo siguiente para select la pestaña que coincida con el día actual:

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

y puede modificar el texto de la pestaña activa con lo siguiente:

$(''#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'');

y necesita las bibliotecas jQuery y jQuery UI.

Manifestación