时间戳

首页 > 解决方案 > 向活动类添加图标而不仅仅是颜色

javascript - 向活动类添加图标而不仅仅是颜色

问题描述

所以我想在点击链接时添加一个播放按钮图标，即不仅应用了带有颜色的活动类，而且旁边还会出现一个播放按钮的图标。以下是我到目前为止的代码。我不完全确定为什么这个网站上的 javascript 位有错误，但代码在我的 wordpress 网站上确实有效。我只想在 .active 中添加颜色，不仅是颜色，还有一个播放按钮图标也会出现在它旁边。干杯。

  (function($) {
    $(document).ready(function() {
      $('.selector a').click(function() {
        $('.selector a').removeClass('active');
        $(this).addClass('active');
      });
    });
  })(jQuery);
.selector {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.selector li {
  float: left;
  border-right: 1px solid #bbb;
}

.selector li a {
  display: block;
  color: white;
  text-align: left;
  padding: 14px 20px;
  text-decoration: none;
}

.selector li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=selector>
  <li><a class="active" href="https://www.youtube.com/embed/aBihWjWQdvA" target="test" onclick="document.getElementById('test').frameBorder=1"> 1 </a></li>
  <li><a href="https://www.youtube.com/embed/aBihWjWQxvd" target="test" onclick="document.getElementById('test').frameBorder=1"> 2 </a></li>
</div>
<div style="position:relative;padding-top:56.25%;">
  <iframe src="https://www.youtube.com/embed/aBihWjWQxvA" frameborder="0" name="test" id="test" allowfullscreen style="position:absolute;top:0;left:0;width:90%;height:90%;"></iframe>
</div>

标签： javascripthtmlcss

解决方案

更新：

使用:before伪选择器怎么样？

https://jsfiddle.net/arfeo/g3wmdn4u/3/

...

.selector {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.selector li {
  float: left;
  border-right: 1px solid #bbb;
}

.selector li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: white;
  text-align: left;
  padding: 14px 20px;
  text-decoration: none;
}

.selector li a:before {
  content: '';
  margin-right: 5px;
}


.selector li a.active:before {
  content: '▶';
  margin-right: 5px;
}

.selector li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: blue;
}

...

推荐阅读