【问题标题】:adding icon to the active class than just colour向活动类添加图标而不仅仅是颜色
【发布时间】:2018-09-29 15:15:55
【问题描述】:

所以我想在点击链接时添加一个播放按钮图标,即不仅应用了带有颜色的活动类,而且旁边还会出现一个播放按钮图标。以下是我到目前为止的代码。我不完全确定为什么这个网站上的 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>

【问题讨论】:

    标签: javascript html css


    【解决方案1】:

    更新:

    使用: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;
    }
    
    ...
    

    【讨论】:

    • 嘿,Arefo,感谢您的回复。但我希望在单击链接时出现播放图标,而不是已经出现在两个链接上。例如,当您点击链接 1 时,播放图标会出现“提示视频正在播放”(如果有意义)
    • 感谢完美,但我需要包含这部分代码吗? .selector li a:after { content: '';左边距:5px; }
    • @website_noob_123 抱歉,我没看懂问题
    • 行 .selector li a:before,有必要吗?, .selector li a.active:before 行不行吗?
    • 我也尝试添加不同的图标而不是您使用的播放按钮,但它不起作用我使用了 content:"\f015; font-family:"Fontawesome"; margin-right: 5px;跨度>
    猜你喜欢
    • 1970-01-01
    • 2013-12-15
    • 2019-06-12
    • 2014-03-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-05-16
    • 1970-01-01
    相关资源
    最近更新 更多