Javascript 侧边栏中的活动列表

嗨，伙计们需要帮助设计我的侧边栏。。。我想在我的侧边栏中使用javascript有一个活动状态。。。 我尝试了

element.css（）

在单击它之后为它提供样式 但是当我点击列表后，我的css中的悬停样式就消失了，我猜是因为我在点击后改变了它的颜色，没有回到它原来的设计

var sideNav=$（'.sideNav'）；
$（“#仪表板”）。单击（函数（）{
sideNav.css({
“颜色”：“8C8C”，
“背景色”：“373942”
});
$（“#仪表板”）.css({
“颜色”：“ccc”，
“背景色”：“515461”
});
});
$（“#客户”）。单击（函数（）{
sideNav.css({
“颜色”：“8C8C”，
“背景色”：“373942”
});
$（“#客户”）.css({
“颜色”：“ccc”，
“背景色”：“515461”
});
});
$（“#项”）。单击（函数（）{
sideNav.css({
“颜色”：“8C8C”，
“背景色”：“373942”
});
$（'#items'）.css({
“颜色”：“ccc”，
“背景色”：“515461”
});
});
。侧栏{
背景色：#373942；
左边距：-15px；
位置：固定；
宽度：230px；
}
.侧边栏{
填充顶部：30px；
}
.侧边栏李{
颜色：#8c8c8c；
文字装饰：无；
列表样式类型：无；
线高：45px；
光标：指针；
/*背景色：红色*/
边缘底部：1px；
/*左边距：20px*/
左侧填充：40px；
字体大小：15磅；
}
.侧边栏李：悬停{
背景色：#515461；
颜色：#ccc；
左边框：4px实心#8c8c；
}


仪表板
客户
项目

单击按钮时，不应使用内联样式突出显示按钮，而应定义一个类来表示活动按钮，然后使用
toggleClass
或
addClass
和
removeClass
函数的组合来完成此操作

这里有一把小提琴让你开始：

CSS

JS

这是一个使用jQuery函数和css的简单解决方案

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
  <ul>
    <li id="dashboard" class="sideNav">Dashboard</li>
    <li id="customers" class="sideNav">Customers</li>
    <li id="items" class="sideNav">Items</li>
  </ul>
</div>

css

.sidebar {
  background-color: #373942;
  margin-left: -15px;
  position: fixed;
  width: 230px;
}
.sidebar ul {
  padding-top: 30px;
}

.sidebar li {
  color: #8c8c8c;
  text-decoration: none;
  list-style-type: none;
  line-height: 45px;
  cursor: pointer;
  margin-bottom: 1px;
  padding-left: 40px;
  font-size: 15pt;
}
.sidebar li:hover{
  border-left: 4px solid #8c8c8c;   
}
.sidebar li:hover, .sidebar li.active{
  background-color: #515461;
  color: #ccc;

}

在codepen中单击以获取完整的代码段

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
  <ul>
    <li id="dashboard" class="sideNav">Dashboard</li>
    <li id="customers" class="sideNav">Customers</li>
    <li id="items" class="sideNav">Items</li>
  </ul>
</div>

$('.sideNav').click(function() {
  $('.sideNav').removeClass('active');
  $(this).addClass('active');
});

.sidebar {
  background-color: #373942;
  margin-left: -15px;
  position: fixed;
  width: 230px;
}
.sidebar ul {
  padding-top: 30px;
}

.sidebar li {
  color: #8c8c8c;
  text-decoration: none;
  list-style-type: none;
  line-height: 45px;
  cursor: pointer;
  margin-bottom: 1px;
  padding-left: 40px;
  font-size: 15pt;
}
.sidebar li:hover{
  border-left: 4px solid #8c8c8c;   
}
.sidebar li:hover, .sidebar li.active{
  background-color: #515461;
  color: #ccc;

}