JSFiddle - React, Tailwind, and code Playground

by dbelle

HTML

<input type="checkbox" class="modelSelect" value="Nissan" />Nissan
<input type="checkbox" class="modelSelect" value="Scion" /> Scion
<input type="checkbox" class="modelSelect" value="Toyota" /> Toyota

<ul class="tabs-content">
    <li href="#Nissan">Nissan</li>
    <li href="#Scion">Scion</li>
    <li href="#Toyota">Toyota</li>
</ul>    
<div class="img">Hover for Color</div>

CSS

ul.tabs-content{margin-top:40px;}
ul.tabs-content li {border:solid 1px #000;display:inline-block;padding:3px;}
ul.tabs-content li:hover {background:#000;color:#fff;}

.img{
    width:300px;height:300px;
    display:block;border:solid 1px #999;
    border-radius:5px;
    margin-top:20px;
    background:url(http://lorempixel.com/output/animals-q-g-640-480-2.jpg) no-repeat 50% 50%;}
.color{background:url(http://lorempixel.com/output/animals-q-c-640-480-2.jpg) no-repeat 50% 50%;}

.changeColor{border:dashed 3px purple;}

JavaScript

$('.modelSelect').change(function(event){
   // console.log(event);
    
   var currentCheck = ("#" + $(event.currentTarget).val());
    
   var tabs = $("ul.tabs-content li");
   var selectedTab = tabs.attr("href");     
    
    if(currentCheck == selectedTab) { 
        console.log("True"); 
                    else{
                    console.log("False"); 
                    }      
                    }

   // $('#output').append($(event.currentTarget).val());  
    
    
  
   //console.log(selectedTab);
   //console.log(currentCheck); 
   
        

   // currentCheck.addClass("changeColor");
});






// Event Helper 
   var $img = $(".img"); 
// Binding Events
    $img.bind("mouseover", colorGorilla);
    $img.bind("mouseleave", colorGorilla);

    function colorGorilla(event){
      $(".img").toggleClass("color");                    
    }  
$img.bind("click", function(){
    $img.unbind("mouseover", colorGorilla);
    $img.unbind("mouseleave", colorGorilla);
    $img.removeClass("color");
    $img.html("<p>Sorry, no more Color</p>");
});