【发布时间】: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