UIKitのタブ移動を複数のタブに適用する方法

何がしたいか

これを見たら言わんとしていることが伝わるはず。伝われ。

上のタブを押したときに、下のタブもあわせてタブ移動させたいってことです。
例えばモーダルウィンドウで、上部のタブを押すことで画面内の要素を表示/非表示することが出来るし、
下のほうにあるボタンを押しても同じことができるようにしたい、みたいなのってあるじゃないですか。

上のタブに uk-active クラスがついている時、下のタブの同様の要素にも uk-active クラスを付与する。
これをjQueryもjavascriptも使用せずに実現します。
使ったほうがもっと早いし、簡潔でわかりやすい気がしますが、
私にはそれを使ってはいけない事情があったので。茨の道です。

実装

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/css/uikit.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/js/uikit.js"></script>
<div class="contents">
	<div class="header">
		<ul class="uk-tab" id="head-tabs" data-uk-switcher="{connect:'#id'}">
			<li class="uk-active">
				<a onclick="UIkit.switcher('#foot-tabs').show(0);">１つ目のタブ</a>
			</li>
			<li>
				<a onclick="UIkit.switcher('#foot-tabs').show(1);">２つ目のタブ</a>
			</li>
		</ul>
	</div>
	<div class="body">
		<ul id="id" class="uk-switcher">
			<li>
				<p>一つ目のコンテンツ</p>
			</li>
			<li>
				<p>二つ目のコンテンツ</p>
			</li>
		</ul>
	</div>
	<div class="footer">
		<ul class="uk-tab" id="foot-tabs" data-uk-switcher="{connect:'#id'}">
			<li class="uk-active">
				<a onclick="UIkit.switcher('#head-tabs').show(0);">１つ目のタブ</a>
			</li>
			<li>
				<a onclick="UIkit.switcher('#head-tabs').show(1);">２つ目のタブ</a>
			</li>
		</ul>
	</div>
</div>

ポイント

タブ要素のaタグに次のようにonclickイベントを記述します。liタグとかに書いてもいいですけど

<!-- ヘッダー部分の場合 -->
<a onclick="UIkit.switcher('#foot-tabs').show(0);">

<!-- フッダー部分の場合 -->
<a onclick="UIkit.switcher('#head-tabs').show(0);">

.show(0)というのが、data-uk-switcher属性のついている要素の、記述しているidに属する子要素の、最初の一つ目を示します。
.show(1)というのが、二つ目です。以上。

おまけ

uk-switcher クラスのついた子要素は、iPhoneなどでスワイプするとタブ遷移します。
1番目のタブで右にスワイプすれば2番目のタブに切り替わる、逆もしかり。
これは uk-switcher クラスに uikit.css で
touch-action: cross-slide-y pinch-zoom double-tap-zoom;と書いてあるからです。

しかし、場合によってはスワイプ移動されるとむしろ困るケースってありますよね。
これをtouch-action: none !important;などとしても、スワイプ動作を解除することはできません。
なので困った時はjQuery。以下のおまじないでスワイプをしないようにできます。
（これももしかするとUIKIT.jsだけで出来そうな気がする）

<script src="https://code.jquery.com/jquery-1.12.4.js">
<script type="text/javascript">
  // 左右スワイプでタブが遷移するのを抑止
  $(window).load(function(){
      $('.uk-switcher').off('swipeRight swipeLeft');
  });
</script>