JSFiddle - React, Tailwind, and code Playground

by vol7ron

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css" />
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Foo</a></li>
            <li><a href="#tabs-2">Bar</a></li>
            <li><a href="#tabs-3">Baz</a></li>
        </ul>
        <div id="tabs-1" ><p>Foo foo foo foo foo foo foo foo. foo-foo!</p></div>
        <div id="tabs-2" ><p>Bar bar bar bar bar bar bar bar. bar-bar!</p></div>
        <div id="tabs-3" ><p>Baz baz baz baz baz baz baz baz. baz-baz!</p></div>
    </div>
                       
    <div id="links1">
       <div>HREF doesn't matter:</div>
       <a href="#tabs-1">foo</a>     
       <a href="#tabs-2">bar</a>           
       <a href="#tabs-3">baz</a>
    </div>

    <div id="links2">
       <div>Trying to dynamically bind onclick</div>
       <a href="#">foo</a> 
       <a href="#">bar</a>       
       <a href="#">baz</a>
    </div>

    <div id="links3">
       <div>What should happen, but not the right method:</div>
       <a href="#" onclick="$('#tabs li:first a').click()">foo</a>
       <a href="#" onclick="$('#tabs li a:eq(1)').click()//not sure if this is the best way to reference">bar</a>       
       <a href="#" onclick="$('#tabs li:last a').click()">baz</a>
    </div>

CSS

#links1 , #links2, #links3      { margin-top:1em; font-size:1.5em;}
#links1 a, #links2 a, #links3 a { text-decoration:none; color:#0cf}

JavaScript

$(function() {
        $( "#tabs" ).tabs(); 
        
        var tabs = $('#tabs ul li a');
        
        $( "#links2 a" ).each(function(index){ 
           $(this).bind('click',function(){
              (tabs[index]).click();
           });
        });
    });