JSFiddle - React, Tailwind, and code Playground

by mrmayfield

HTML

<div id="buttons">
    <button class="active" id="tabone">How it Works</button>
    <button id="tabtwo">Features</button>
</div>
<di id="box-one" class="box">Tab one</di>
<di id="box-two" class="box">Tab two</di>
<a href="#fred" something="somethingelse">Hello</a>

<div id="console-log"></div>

CSS

.active{
    background-color:blue;
}

#box-one {
    display: block;
    width:200px height:200px;
}
#box-two {
    display: none;
    width:200px height:200px;
}
#box-three {
    display: none;
    width:200px height:200px;
}

.console-line
{
    font-family: monospace;
    margin: 2px;
}

JavaScript

var hash = 'fred'
var finder = 'a[href="#' + hash + '"]'

console.log(finder);

var fred = $(finder);
console.log(fred);


function onEnter(){
    $('#buttons button').css({ opacity:0.6 });
    $(this).css({ opacity:1 });
}
function onExit(){
    $('#buttons button').css({ opacity:1 });
}

$('#buttons button').mouseenter( onEnter).mouseleave( onExit );

$("#buttons button").click(function () {
    $('.box').hide("slow").eq($(this).index()).show("slow");
    console.log(window.location.hash);
    $( this ).addClass( "active" );
    $( "#buttons button" ).not( this ).removeClass ("active");

});