UIKit Switcher не будет swich

Question

Я пытался заставить переключатель на следующем JFiddle переключаться на пару часов без поддержки.Я даже удалил весь свой HTML-код, чтобы убедиться, что ничего не конфликтует, а затем запустил JFiddle, просто чтобы проверить, является ли это только мой компьютер или что-то другое.

Я также пытался несколько раз изменить свой код безуспешно.Есть идеи, почему переключатель не переключается?

function changeSwitcher()
{
UIkit.switcher("#component-tab-left").show(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" rel="stylesheet"/>
<div id="navbar">
  <ul id="menuTabs" class="uk-tab-left" uk-tab="connect: #component-tab-left;">
    <li class="tabs information"><a href="#" class="tabs-links"> Information</a></li>
    <li class="tabs warranty"><a href="#" class="tabs-links">Warranty</a></li>
    <li class="tabs history"><a href="#" class="tabs-links">History</a></li>
    <li class="tabs settings"><a href="#" class="tabs-links">Settings</a></li>
    <li class="tabs libraries"><a href="#" class="tabs-links">Libraries</a></li>
    <li class="tabs about"><a href="#" class="tabs-links">About</a></li>
  </ul>
</div>
<div class="uk-width-expand@m">
  <ul id="component-tab-left" class="uk-switcher">
    <li class="information">Info</li>
    <li class="warranty"></li>
    <li class="history">
      <button class="uk-button uk-button-default swatch_7" onclick="changeSwitcher()">Default</button>
    </li>
    <li>Settings</li>
    <li class="libraries">
      libraries
    </li>
    <li class="about">
      about
    </li>
  </ul>
</div>

https://jsfiddle.net/aurdzvm5/

Answer 1

Вот рабочий пример. https://codepen.io/anon/pen/gEzZaW

Как кажется, вам нужно поместить элемент ul переключателя непосредственно под элементом ul вертикальных вкладок.

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.5/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-container uk-container-center">  
    <h3>Control with JS</h3>
  <ul class="uk-tab" id="js-control" data-uk-tab="{connect:'#my-id4'}">
    <li id="tab1"><a href="">Tab 1</a></li>
    <li id="tab2"><a href="">Tab 2</a></li>
    <li id="tab3"><a href="">Tab 3</a></li>
  </ul>
  <ul id="my-id4" class="uk-switcher uk-margin">
    <li>Content 1<br>
    <code>UIkit.switcher('#js-control').show(0);</code></li>
    <li>Content 2<br>
    <code>UIkit.switcher('#js-control').show(1);</code></li>
    <li>Content 3<br>
    <code>UIkit.switcher('#js-control').show(2);</code></li>
  </ul>
  
  <ul class="uk-subnav uk-subnav-line">
  <li><a onclick="UIkit.switcher('#js-control').show(0);">Open tab 1</a></li>
    <li><a onclick="UIkit.switcher('#js-control').show(1);">Open tab 2</a></li>
    <li><a onclick="UIkit.switcher('#js-control').show(2);">Open tab 3</a></li>
  </ul>

</div>