JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<UL>
<LI>
  <p>cnn</p>

</LI>
<li>
   <div>Text</div>
</li>
</UL>
<ul id="cssmenu1"><li><a href="/Runtime/Runtime/Form/Workload">Workload</a></li><li><a href="/Runtime/Runtime/Form/ViewOwnProfile/">Profile</a></li><li><a href="/Runtime/Runtime/Form/SearchForm/">Search</a></li><li><a href="/Runtime/Runtime/Form/Reports/">Reports</a></li></ul>

JavaScript

$("ul:nth-child(2) > li:nth-child(1) > a:nth-child(1)").css({"background-color":"#ff0","border": "1px", "border-weight":"1px", "border-style":"solid", "border-color":"#000"});
$("ul:nth-child(2) > li:nth-child(2) > a:nth-child(1)").css({"background-color":"#ff0","border": "1px", "border-weight":"1px", "border-style":"solid", "border-color":"#000"});
$("ul:nth-child(2) > li:nth-child(3) > a:nth-child(1)").css({"background-color":"#ff0","border": "1px", "border-weight":"1px", "border-style":"solid", "border-color":"#000"});
$("ul:nth-child(2) > li:nth-child(4) > a:nth-child(1)").css({"background-color":"#ff0","border": "1px", "border-weight":"1px", "border-style":"solid", "border-color":"#000"});
    
var loc = $(location).attr('href');
 $("p").text(loc);
 	var lm = loc.split('/').reverse()[1];
  $("div").text(lm);
  
 if (lm === "_display")
{
	$("ul:nth-child(2) > li:nth-child(1) > a:nth-child(1)").css({"background-color":"#cccc00","border": "1px", "border-weight":"1px", "border-style":"solid", "border-color":"#000"});


}
else if (lm === "workload")
{
$("ul:nth-child(1) > li:nth-child(1) > a:nth-child(1)").css({"background-color":"#ff0","border": "0px", "border-weight":"1px"});
}
else if (lm === "profile")
{
$("ul > li > a").css({"background-color":"#ff0","border": "0px", "border-weight":"1px"});
}
else if (lm === "search")
{
$("ul > li > a").css({"background-color":"#ff0","border": "0px", "border-weight":"1px"});
}
else if (lm === "Reports")
{
$("ul > li > a").css({"background-color":"#ff0","border": "0px", "border-weight":"1px"});
}
else 
{
$("ul > li > a").css({"background-color":"#ff0","border": "0px", "border-weight":"1px"});
}