Навигация для jquery Ui Tabs вне контейнера, как сделать?

Question

[Валерий Столярчук]

Всем привет!

Использую Jquery Ui Tabs, и возникла трудность с реализацией двойной навигации для табов.

Ниже предоставлен HTML код необходимой структуры

<!-- Дополнительная навигация-->
<ul class="new-control">
	<li><a href="#tab-1">Tab one</a></li>
	<li><a href="#tab-2">Tab two</a></li>
	<li><a href="#tab-3">Tab hree</a></li>
</ul>

<div id="tab">
<!-- Основная навигация для табов-->
	<ul>
		<li><a href="#tab-1">Tab one</a></li>
		<li><a href="#tab-2">Tab two</a></li>
		<li><a href="#tab-3">Tab three</a></li>
	</ul>
	<div id="tab-1">
		<p>Centent 1</p>
	</div>
	<div id="tab-2">
		<p>Centent 4</p>
	</div>

	<div id="tab-3">
		<p>Centent 3</p>
	</div>
</div>

Необходимо сделать две навигации для табов, что бы с контейнера с клласом: new-control можно было открывать табы.
Песочница: https://jsfiddle.net/Brainiak/xLv2qkLu/8/

Подскажите как это можно реализовать ? Спасибо
Так же буду очень признателен если посоветуете плагин табов в котором можно такое реализовать

Answer 1

[Exploding]

Ну вот так пойдет?

<ul class="new-control">
	<li><a href="#" data-tab="0">Tab one</a></li>
	<li><a href="#" data-tab="1">Tab two</a></li>
	<li><a href="#" data-tab="2">Tab hree</a></li>
</ul>

$("#tab").tabs();
$(".new-control a").on("click", function(){
    $("#tab").tabs("option", "active", $(this).data("tab"));
});

https://jsfiddle.net/g311gd2j/
Может и по-инвалидному, но пока че-то в голову ничего лучше не пришло)))