JSFiddle - React, Tailwind, and code Playground

by David Pickering

HTML

<div id="tabs">
	<ul id="tabs_list" class="tabs" >
		<li id="li_ui_id_1" ><a href="#tabs-1" style="cursor:pointer;">Tab 1</a></li>
		<li id="li_ui_id_2" ><a href="#tabs-2" style="cursor:pointer;">Tab 2</a></li>
		<li id="li_ui_id_3" ><a href="#tabs-3" style="cursor:pointer;">Tab 3</a></li>
    <li id="li_ui_id_4" ><a href="#tabs-4" style="cursor:pointer;">Tab 4</a></li>
    <li id="li_ui_id_5" ><a href="#tabs-5" style="cursor:pointer;">Tab 5</a></li>
    <li id="li_ui_id_6" ><a href="#tabs-6" style="cursor:pointer;">Tab 6</a></li>
	</ul>
  <div id="tabs-1">
    <a class="myButton btn_tab3" style="color:white;"> View Tab 3 By Index</a>
    <a class="myButton btn_tab3_id" style="color:white;"> View Tab 3 By ID</a>
    <h5>This is the 1st Tab</h5>
  </div>
  <div id="tabs-2"><h5>This is the 2nd Tab</h5></div>
  <div id="tabs-3"><h5>This is the 3rd Tab</h5>
      <a class="myButton btn_tab1" style="color:white;"> Return to Tab 1 By index</a>
    <a class="myButton btn_tab1_id" style="color:white;"> Return to Tab 1 By ID</a>
  </div>
  <div id="tabs-4"><h5>This is the 4th Tab</h5></div>
  <div id="tabs-5"><h5>This is the 5th Tab</h5></div>
  <div id="tabs-6"><h5>This is the 6th Tab</h5></div>
</div>

CSS

.myButton {
	-moz-box-shadow: 0px 10px 14px -7px #000000;
	-webkit-box-shadow: 0px 10px 14px -7px #000000;
	box-shadow: 0px 10px 14px -7px #000000;
	background-color: #540ab8;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #540ab8;
	display: inline-block;
	color: white;
	font-family: arial;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 0px 1px 0px #5b8a3c;
	padding: 6px 51px;
	vertical-align: middle;
	letter-spacing: 1;
	font-size: 20px;
	cursor:pointer;
}
.myButton:hover {
	background-color:#540ab8;
}
.myButton:active {
	position:relative;
	top:1px;
}

JavaScript

$("#tabs").tabs(); 

        $(".btn_tab3").click(function () {
            $( "#tabs" ).tabs( "option", "active", 2 );
        });         

$(".btn_tab3_id").click(function () {
  function selectTab(tabName) {
      $("#tabs").tabs("option", "active", $(tabName + "").index());
  }
  selectTab("#li_ui_id_3");
});
  

$(".btn_tab1").click(function () {
            $( "#tabs" ).tabs( "option", "active",0 );
        });         

$(".btn_tab1_id").click(function () {
  function selectTab(tabName) {
      $("#tabs").tabs("option", "active", $(tabName + "").index());
  }
  selectTab("#li_ui_id_1");
});