Ссылка на конкретную вкладку из ссылки href - PullRequest
Новая
       17

Ссылка на конкретную вкладку из ссылки href

0 голосов
/ 14 мая 2018

Я пытаюсь связать index.html с помощью ссылки href на Players.html -> Pele tab.

Вот мой index.html код: 

  <a href="players.html#client-panel-2"></a>

и мои Players.html 

              <ul data-tabs="data-tabs" id="example-tabs" class="tabs">
                <li class="tabs-title is-active" tab-community-amenities="tab-community-amenities"
                    role="presentation">
                  <div class="tabs-link" data="#client-panel-0" role="tab" aria-controls="client-panel-0"
                       aria-selected="false" id="client-panel-0-label">Messi
                  </div>
                </li>
                <li class="tabs-title" tab-apartment-amenities="tab-apartment-amenities" role="presentation">
                  <div class="tabs-link" data="#client-panel-1" role="tab" aria-controls="client-panel-1"
                       aria-selected="false" id="client-panel-1-label">Pele
                  </div>
                </li>
                <li class="tabs-title" tab-pet-policy="tab-pet-policy" role="presentation">
                  <div class="tabs-link" data="#client-panel-2" role="tab" aria-controls="client-panel-2"
                       aria-selected="false" id="client-panel-2-label">Kaka
                  </div>
                </li>
                <li class="tabs-title" tab-parking-details="tab-parking-details" role="presentation">
                  <div class="tabs-link" data="#client-panel-3" role="tab" aria-controls="client-panel-3"
                       aria-selected="false" id="client-panel-3-label">Benzema ;)
                  </div>
                </li>
                <li class="tabs-title" tab-parking-details="tab-parking-details" role="presentation">
                  <div class="tabs-link" data="#client-panel-4" role="tab" aria-controls="client-panel-4"
                       aria-selected="false" id="client-panel-4-label">Berbatov
                  </div>
                </li>
              </ul>

1 Ответ

0 голосов
/ 14 мая 2018

сделать ссылку содержать некоторую переменную url 

<a href="players.html?selected=pele-id></a>

использовать JQuery его приятно 

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

добавьте тег id, чтобы его было легче найти с помощью jquery 

<div id="pele-id" class="tabs-link" data="#client-panel-2" role="tab" aria-controls="client-panel-2"
                       aria-selected="false" id="client-panel-2-label">

получить это значение в теге скрипта. затем отредактируйте attr aria-selected (я полагаю, это то, что вы пытаетесь изменить). 

<script>
var url = new URL(window.location.href);
var selector = url.searchParams.get("selected");
$("#" + selector).attr("aria-selected", "true")
</script>

Предполагая, что изменение этого атрибута на "true" будет делать то, что вы хотите, это должно работать для всех различных

...