JSFiddle - React, Tailwind, and code Playground

by shawnhsuicpdas

HTML

<div id="content">
  <div id="Main_Left-List">
    			<ul class="clearfix">
    				<li><a href="#">time setting</a></li>
            <li><a href="#">network setting</a></li>
            <li><a href="#">account setting</a></li>
            <li><a href="#">boot menu</a></li>
            </ul>
   </div>
</div>

CSS

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

.container  {
    display: block;
    width: 960px;
    margin: 0 auto;
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

#Main_Left-List {
    float: left;
    text-transform: capitalize;
}

#Main_Left-List li {
    list-style-type: none;
    height: 100%;
    margin: 20px 0px 20px 0px;
}
#Main_Left-List a {
    color: #707070;
    text-decoration: none;
    font-size: 17px;
    padding: 12px 50px 12px 12px;
}

#Main_Left-List .active a {
    color: #2A2A2A;
    border-left: 5px solid #395d8b;
}

JavaScript

var Main_LeftListLiSelector = $("#Main_Left-List li");
		
		$(Main_LeftListLiSelector).on('click', function(){
        $(Main_LeftListLiSelector).removeClass('active');
        $(this).addClass('active');
		});