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');
});