JSFiddle - React, Tailwind, and code Playground

by dhana36

HTML

<div id="tabs">
		<ul class='tabs'>
			<li><a id="ATab1" href='#tab1'>Tab 1</a></li>
			<li><a id="ATab2" href='#tab2' >Tab 2</a></li>
			<li><a id="ATab3" href='#tab3' >Tab 3</a></li>
			<li><a id="ATab4" href='#tab4' >Tab 4</a></li>
			<li><a id="ATab5" href='#tab5' >Tab 5</a></li>
			<li><a id="ATab6" href='#tab6' >Tab 6</a></li>
			
		</ul>
		<div id='tab1'>
			<h3>Section 1</h3>
			Fisrt: <input type="text" />
			<br />
			Second: <input type="text" />
			<br />
			Third: <input type="text" />
			<br />
			Fourth: <input type="text" />
		</div>
		<div id='tab2'>
			<h3>Section 2</h3>
			Fifth: <input class='ttt' type="text" />
			<br />
			Sixth: <input type="text" />
		</div>
		<div id='tab3'>
			<h3>Section 3</h3>
			Seventh: <input type="text" />
			<br />
			Eighth: <input type="text" />
		</div>
		<div id='tab4'>
		<h3>Section 4</h3>
			ninth: <input type="text" />
			<br />
			tength: <input type="text" />
		</div>
		<div id='tab5'>
		<h3>section 5</h3>
		11: <input type="text" />
		<br />
		12: <input type="text" />
	</div>

        <div id='tab6'>
		<h3>section 6</h3>
		13: <input type="text" value="" />
		<br />
		14: <input type="text" />
	</div>

CSS

* {padding:0; margin:0;}

			html {
				/*background:url(/img/tiles/wood.png) 0 0 repeat;*/
				padding:15px 15px 0;
				font-family:sans-serif;
				font-size:14px;
			}

			p, h3 { 
				margin-bottom:15px;
			}

			div {
				padding:10px;
				width:600px;
				background:#fff;
			}

			.tabs li {
				list-style:none;
				display:inline;
			}

			.tabs a {
				padding:5px 10px;
				display:inline-block;
				background:#666;
				color:#fff;
				text-decoration:none;
			}

			.tabs a.active {
				background:#fff;
				color:#000;
			}

JavaScript

$(document).ready(function () {
    $('ul.tabs').each(function () {
        // For each set of tabs, we want to keep track of
        // which tab is active and it's associated content
        var $active, $content, $links = $(this).find('a');

        if ($('#_ctl0_hdnCurrentTabSelection').val() == "") {
            $('#_ctl0_hdnCurrentTabSelection').val(location.hash)
        }

		// If the location.hash matches one of the links, use that as the active tab.
        // If no match is found, use the first link as the initial active tab.
        $active = $($links.filter('[href="' + $('#_ctl0_hdnCurrentTabSelection').val() + '"]')[0] || $links[0]);
        $active.addClass('active');
        $content = $($active.attr('href'));
        window.location.href = window.location.href.toString().split('#')[0] + $active.attr('href');

        // Hide the remaining content
        $links.not($active).each(function () {
            $($(this).attr('href')).hide();
        });

        // Bind the click event handler
        $(this).on('click', 'a', function (e) {
            // Make the old tab inactive.
            
            $active.removeClass('active');
            //window.location.href = window.location.href.toString().replace($active.attr('href'), '');
            $content.hide();

            // Update the variables with the new link and content
            $active = $(this);
            $('#_ctl0_hdnCurrentTabSelection').val($active.attr("href"))
            $content = $($(this).attr('href'));
            window.location.href = window.location.href.toString().split('#')[0] + $active.attr('href');

            // Make the tab active.
            $active.addClass('active');
            $content.show(this.href);
            var tt = $(this).attr('href')
            $(tt).find('input:eq(0)').focus()
            console.log($(tt).find('input:eq(0)').val())
            //$(this.href).find('.ttt').focus()
            // Prevent the anchor's default click action
         ...