Question

https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7

我制作了一个看起来像截图的进度条当我将鼠标悬停在它上面时会变成绿色。我想让bg颜色变成绿色当我点击另一个栏时，将其更改回白色。请帮忙！

Answer 1

我建议您使用jquery，将click事件添加到包含类<a>的元素下的所有breadcrumb：

$('.breadcrumb > a').on('click', function() {
  $('.breadcrumb > a').removeClass('active');
  $(this).addClass('active');
})

使用CSS规则active，点击标签后，移除所有有效标签，然后将类active添加到您刚刚点击的标签中。

$('.breadcrumb > a').on('click', function() {
  $('.breadcrumb > a').removeClass('active');
  $(this).addClass('active');
})

.active {
  background: #444
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <style>
    input[type="checkbox"] {
      display: none;
    }
    
    input[type="radio"] {
      display: none;
    }
    
    .breadcrumb {
      /*centering*/
      display: inline-block;
      background-color: white;
      overflow: hidden;
      border-radius: 5px;
      /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
      counter-reset: flag;
      margin-bottom: 0px;
      border: 1px solid #ccc !important;
      padding: 0;
    }
    
    .breadcrumb a {
      text-decoration: none;
      outline: none;
      display: block;
      float: left;
      line-height: 36px;
      color: white;
      /*need more margin on the left of links to accomodate the numbers*/
      padding: 0 10px 0 60px;
      background: #666;
      background: linear-gradient(#666, #333);
      position: relative;
    }
    /*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
    
    .breadcrumb a:first-child {
      padding-left: 46px;
    }
    
    .breadcrumb a:first-child:before {
      left: 14px;
    }
    
    .breadcrumb a:last-child {
      padding-right: 20px;
    }
    /*hover/active styles*/
    
    .breadcrumb a.active,
    .breadcrumb a:hover {
      background: #333;
      background: linear-gradient(#333, #000);
    }
    
    .breadcrumb a.active:after,
    .breadcrumb a:hover:after {
      background: #333;
      background: linear-gradient(135deg, #333, #000);
    }
    /*adding the arrows for the breadcrumbs using rotated pseudo elements*/
    
    .breadcrumb a:after {
      content: '';
      position: absolute;
      top: 0;
      right: -18px;
      /*half of square's length*/
      /*same dimension as the line-height of .breadcrumb a */
      width: 36px;
      height: 36px;
      transform: scale(0.707) rotate(45deg);
      /*we need to prevent the arrows from getting buried under the next link*/
      z-index: 1;
      /*background same as links but the gradient will be rotated to compensate with the transform applied*/
      background: linear-gradient(135deg, #666, #333);
      /*stylish arrow design using box shadow*/
      box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
      border-radius: 0 5px 0 50px;
    }
    /*we dont need an arrow after the last link*/
    
    .breadcrumb a:last-child:after {
      content: none;
    }
    /*we will use the :before element to show numbers*/
    
    .breadcrumb a:before {
      /*some styles now*/
      border-radius: 100%;
      width: 20px;
      height: 20px;
      line-height: 20px;
      margin: 8px 0;
      position: absolute;
      top: 0;
      left: 30px;
      background: #444;
      background: linear-gradient(#444, #222);
      font-weight: bold;
    }
    
    .flat a,
    .flat a:after {
      background: white;
      color: black;
      transition: all 0.5s;
    }
    
    .flat a:hover,
    .flat a.active,
    .flat a:hover:after,
    .flat a.active:after {
      color: white;
      background: #369F00;
    }
    
    .flat input[type="radio"]:checked~label {
      background: #369F00;
      color: white;
    }
  </style>
</head>

<body>

  <div class="row">

    <div class="col-md-12">

      <div class="breadcrumb flat">
        <a href="#">
                                        Invite a New Applicant
                                    </a>
        <a href="#">
          <label class="radio-inline">
              <input type="radio" value="new" data-bind="checked: applicationsFilter" class="" name="ko_unique_9"> New Applicants (
              <span data-bind="text: newApplicationsCount">4</span>)
            </label>
        </a>
        <a href="#">
          <label class="radio-inline">
              <input type="radio" value="shortlisted" data-bind="checked: applicationsFilter" name="ko_unique_10"> Shortlisted Applicants (
              <span data-bind="text: shortlistedApplicationsCount">0</span>)
            </label>
        </a>
        <a href="#">
          <label class="radio-inline">
              <input type="radio" value="connected" data-bind="checked: applicationsFilter" name="ko_unique_11"> Connected Applicants (
              <span data-bind="text: connectedApplicationsCount">0</span>)
            </label>
        </a>

      </div>

      <div class="breadcrumb flat">
        <a href="#">
                                        <label class="radio-inline" data-bind="visible: applications().length > 0">
                                            <input type="checkbox" data-bind="checked: showHiddenApplications">
                                            Hidden
                                        </label>
                                    </a>
      </div>





    </div>

  </div>
</body>

</html>

进度条在单击时更改后退并返回

1 个答案: