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>

UIKit切换器不会夹住

1 个答案: