sanjaysgh Ответов: 1

Как активировать HTML li с помощью javascript

У меня есть этот код в HTML

<ul class="nav nav-tabs" role="tablist">

       <li role="presentation" class="active"><a href="#unpaid" id="tabUnpaidJobs" aria-controls="unpaid" role="tab" data-toggle="tab">Unpaid Jobs</a></li>
       <li role="presentation"><a href="#available" id="tabAvailableJob" aria-controls="available" role="tab" data-toggle="tab">Available Jobs</a></li>
       <li role="presentation"><a href="#inprogress" aria-controls="inprogress" role="tab" data-toggle="tab">My In-Progress Jobs</a></li>
       <li role="presentation"><a href="#Approval" id="tabApproval" aria-controls="Approval" role="tab" data-toggle="tab">Need Approval</a></li>
       <li role="presentation"><a href="#submitted" aria-controls="submitted" role="tab" data-toggle="tab">My Submitted Jobs</a></li>
       <li role="presentation"><a href="#Resources" aria-controls="Resources" role="tab" onclick="UploadFile()" data-toggle="tab">Resources</a></li>
   </ul>


Здесь я хочу выбрать вторую вкладку "tabAvailableJob" по умолчанию, как я могу это сделать.
Пожалуйста, помогите мне.

Что я уже пробовал:

Я уже пробовал этот код
$('#example'). addClass ("активный");

F-ES Sitecore

Очевидно, вы используете плагин, который преобразует элементы li в меню, вкладки и т. д. li elements не имеют понятия "активный", поэтому решение зависит от того, что ожидает плагин, и поскольку вы не сказали нам, какой плагин вы используете, невозможно дать конкретный совет.

ZurdoDev

Я на 100% согласен с F-ES.

1 Ответов

Рейтинг:
0

Richard Deeming

Предполагая, что вы используете Начальная загрузка[^], что-то вроде этого должно сработать:

$("#tabAvailableJob").tab("show");

В качестве альтернативы удалите" активный " класс из первого <li> и tab-pane, и добавить его ко второму:
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation">...</li>
    <li role="presentation" class="active"><a href="#available" id="tabAvailableJob" aria-controls="available" role="tab" data-toggle="tab">Available Jobs</a></li>
    ...
</ul>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="unpaid">...</div>
    <div role="tabpanel" class="tab-pane active" id="available">...</div>
    ...
</div>


(Если вы используете что-то другое, то вам нужно будет сказать нам, что это такое.)