Открыть вкладку, используя ссылку на тег? - PullRequest
0 голосов
/ 04 июля 2018

Итак, у меня есть две вкладки на странице с тегами привязки. Я перехожу к ним с домашней страницы, используя привязку к пункту меню заголовка.

Я получил действительные вкладки, используя активный класс и aria-extended = "true", но я не могу получить соответствующую вкладку, которая будет активной из заголовка.

т.е .: 1. Заголовок меню-> нажмите на ссылку # tab2 2. Загрузите страницу-> выделите якорный тег-> вкладка2 открыта (это часть, с которой у меня проблема, вкладка 1 остается открытой, пока я фактически не нажму на кнопку tab2)

Я пытался изменить задействованный активный класс, но я довольно плохо знаком с javascript / jquery, поэтому не уверен, что смогу это сделать на самом деле; кроме того, это в worpress, и в заголовочном меню нет поля для идентификатора его собственных элементов.

===============================

РЕДАКТИРОВАНИЕ, УТОЧНЕНИЕ: у меня работают вкладки, и я могу перейти к ним на странице по ссылке в заголовке, мне просто нужно открыть правую вкладку в зависимости от ссылки, которую я нажимаю из заголовка

Я также пытался инициировать .click (# tab2), но скрипт не будет работать правильно.

if(window.location.href.indexOf("tab2") > -1) {
       document.getElementById('tab2').click();
    }

Edit: Заголовок HTML для ссылки:

<ul class="uk-nav uk-nav-navbar">
        <li class="uk-active">
            <a title="" href="testsite.com/#tab1" >tab 1</a></li>
        <li class="uk-active"><a title="" href="testsite.com/#tab2" 
            class="">tab2</a>
        </li>
    </ul>

Вкладка HTML

    <li class="uk-width-medium-1-4 active" id="tab1" aria-expanded="false">
        <a class="uk-button tab1">tab1</a>
    </li>
    <li class="uk-width-medium-1-4 " id="tab2" aria-expanded="false">
        <a class="uk-button tab2">tab2</a>
    </li>

Javascript:

var ai = document.getElementById(""); [I'm having trouble with this, cause I can't see a way to attach an id to a wordpress menu item]

var ch = document.getElementById("");

ai.onclick = function(){
    document.getElementById('tab1').click();
}

ch.onclick = function(){
    document.getElementById('tab2').click();
}

1 Ответ

0 голосов
/ 04 июля 2018

Вы также можете попробовать это с помощью jQuery. Добавив пример кода ниже, пожалуйста, посмотрите.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    var anchorHash = window.location.href.toString();
    if( anchorHash.lastIndexOf('#') != -1 ) {
        anchorHash = anchorHash.substr(anchorHash.lastIndexOf('#'));
        if( $('a[href="'+ anchorHash +'"]').length > 0 ) {
            $('a[href="'+ anchorHash +'"]').trigger('click');
        }
    }
});
</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...