边栏

Question

嗨，大家需要帮助设计我的侧边栏...我希望在我的侧边栏中使用javascript有一个活动状态... 我点击了element.css()给它的样式 但是在我点击列表后，我的css悬停样式消失了，我猜测它是因为我点击后改变了颜色，没有回到原来的设计。

var sideNav = $('.sideNav');
$('#dashboard').click(function() {
  sideNav.css({
    'color': '#8c8c8c',
    'background-color': '#373942'
  });
  $('#dashboard').css({
    'color': '#ccc',
    'background-color': '#515461'
  });
});
$('#customers').click(function() {
  sideNav.css({
    'color': '#8c8c8c',
    'background-color': '#373942'
  });
  $('#customers').css({
    'color': '#ccc',
    'background-color': '#515461'
  });
});
$('#items').click(function() {
  sideNav.css({
    'color': '#8c8c8c',
    'background-color': '#373942'
  });
  $('#items').css({
    'color': '#ccc',
    'background-color': '#515461'
  });
});

.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;
  /*background-color: red;*/
  margin-bottom: 1px;
  /*margin-left: 20px;*/
  padding-left: 40px;
  font-size: 15pt;
}

.sidebar li:hover {
  background-color: #515461;
  color: #ccc;
  border-left: 4px solid #8c8c8c;
}

<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>

Answer 1

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

这是让你入门的小提琴：https://jsfiddle.net/hwwy8yhL/2/

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;
  /*background-color: red;*/
  margin-bottom: 1px;
  /*margin-left: 20px;*/
  padding-left: 40px;
  font-size: 15pt;
}

.sidebar li:hover {
  background-color: #515461;
  color: #ccc;
  border-left: 4px solid #8c8c8c;
}

.sidebar li.active
{
  color: #ccc;
  background-color: #515461
}

JS

var sideNav = $('.sideNav');
$('#dashboard').click(function() {
  sideNav.removeClass('active');
  $('#dashboard').addClass('active');
});
$('#customers').click(function() {
  sideNav.removeClass('active');
  $('#customers').addClass('active');
});
$('#items').click(function() {
  sideNav.removeClass('active');
  $('#items').addClass('active');
});

Answer 2

这是一个使用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>

<强> Jquery的

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

<强> 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;

}

点击here获取codepen中的完整代码段