javascript - 添加指向事件选项卡的指针以显示

Question

我创建了一个视频库，以标签方式显示 4 个视频。

功能正常，设计也正常，但我需要在第二列中添加指向事件视频的指针/箭头

// Video Tabs script
InitPlayVideoTabs();
			      
function InitPlayVideoTabs() {
    $('.hp-video-a').click(function (e) {
        // alert('inside function');
        e.preventDefault();
        var URL = $(this).attr('href');
        var htm = '<iframe width="100%" class="hp-active-iframe" min-height="324" src="http://www.youtube.com/embed/' + URL + '?showinfo=0&autoplay=1" frameborder="0" allowfullscreen="1" ></iframe>';

	$('.hp-video-a').css("background","none");
	$(this).css("background","#eee");
			 
	//code to autoplay video
	//$(".hp-active-iframe")[0].src += "&autoplay=1";
	//ev.preventDefault();
				
        // alert(URL);
        $(".hp-active-video-title").html($(this).find(".hp-video-title").html());
        $(".hp-active-video-date").html($(this).find(".hp-video-date").html());
        $('.hp-active-iframe').attr('src', URL);

        return false;
    });
}
	 

.full-container{width:100%;}
.full-container {
    width: 100%;
    margin: 25px 0;
    padding: 25px 0;
}
.content-wrapper{
    padding-top:0px; 
    background-color:none; 
    max-width:1040px; 
    max-width:1170px;
}

.hp-video-embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-bottom: 0px;
}
.hp-video-left-col{}
.hp-video-right-col a:first-child{ background-color:#ddd;}
.hp-video-right-col a:last-child{ margin-bottom:0px;}
.hp-active-iframe-wrapper {
    float: left;
    width: 100%;
    background-color: #f5f5f5;
}

.hp-video-embed-container iframe, .hp-embed-container object, .hp-embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.hp-video-item-w{
    background-color:#ccc;
}

.hp-hqdefault-w {
    max-height: 66px;
    max-width: 120px;
    overflow: hidden;
    position: relative;
    width:30%;
}
.hp-video-img-w {
    position: relative;
    width: 100%;
    overflow: hidden;
    float:left;
}
.hp-video-details{
    width:65%;
    float:left;
}
.hp-video-title{
    font-size:20px; 
    margin-top:0px; 
    margin-left:10px;
}
.hp-video-title{
    font-size:13px; 
    font-weight:700; 
    padding-top:10px; 
    margin-top:0px; 
    margin-left:10px;
}
.hp-video-a{
    display:inline-block; 
    width:100%; 
    margin-bottom:7px;
}

@media (max-width:991px)
{
    .hp-video-left-col{
        width:100%;
}
    .hp-video-right-col {
        width:100%;
}	
	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-container bg-light-gray"> 
    <div class="container content-wrapper"> 
	    <div class="row"> 	
	        <div class="col-md-7 col-sm-6 hp-video-left-col">
	            <div class="hp-active-iframe-wrapper hp-video-embed-container">
	                <iframe id='activeIFrame' class='hp-active-iframe' width='100%' height='324' src="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1" ></iframe>
	            </div>
	        </div>
            <div class="col-md-5 col-sm-6 hp-video-right-col">
                <a class="hp-video-a" href="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1">
                    <div class="hp-video-img-w hp-hqdefault-w">
                        <img class="img-responsive img-center hp-scale hp-img-hqdefault"  src="http://img.youtube.com/vi/WzQBSlNqs-k/hqdefault.jpg" title="">                                  
                    </div>
                    <div class="hp-video-details">
                        <h3 class="hp-video-title">Mr. Bean is back on the road ONE </h3>
                    </div>
                </a>	
						  
                <a class="hp-video-a" href="http://www.youtube.com/embed/uKar-9RCRnI?showinfo=0&modestbranding=1">
                    <div class="hp-video-img-w hp-hqdefault-w">
                        <img class="img-responsive img-center hp-scale hp-img-hqdefault"  src="http://img.youtube.com/vi/uKar-9RCRnI/hqdefault.jpg" title="">                                  
                    </div>
                    <div class="hp-video-details">
                        <h3 class="hp-video-title">Mr. Bean is back on the road TWOOOOOO</h3>
                    </div>
                </a>
						  
                <a class="hp-video-a" href="http://www.youtube.com/embed/xIOP1PLjUTs?showinfo=0&modestbranding=1">
                    <div class="hp-video-img-w hp-hqdefault-w">
                        <img class="img-responsive img-center hp-scale hp-img-hqdefault"  src="http://img.youtube.com/vi/xIOP1PLjUTs/hqdefault.jpg" title="">                                  
                    </div>
                    <div class="hp-video-details">
                        <h3 class="hp-video-title">Mr. Bean is back on the road Three</h3>
                    </div>
                </a>
						  
                <a class="hp-video-a" href="http://www.youtube.com/embed/zUTi89FhSRo?showinfo=0&modestbranding=1">
                    <div class="hp-video-img-w hp-hqdefault-w">
                        <img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/zUTi89FhSRo/hqdefault.jpg" title="">                                  
                    </div>
                    <div class="hp-video-details">
                        <h3 class="hp-video-title">Mr. Bean is back on the road Four</h3>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

编辑:为代码修复了代码缩进

图片

CodePen https://codepen.io/anon/pen/dePoLr

Answer 1

您可以使用一个类来添加三 Angular 形。我在源代码中记录了我添加/删除/更改的内容。 HTML 未受影响。

你只需要为初始加载设置三 Angular 形。

// Video Tabs script
InitPlayVideoTabs();

function InitPlayVideoTabs() {
  $('.hp-video-a').click(function(e) {
    // alert('inside function');
    e.preventDefault();
    var URL = $(this).attr('href');
    var htm = '<iframe width="100%" class="hp-active-iframe" min-height="324" src="http://www.youtube.com/embed/' + URL + '?showinfo=0&autoplay=1" frameborder="0" allowfullscreen="1" ></iframe>';
    $('.hp-video-a').css("background", "none");
    $(this).css("background", "#eee");
    $(".hp-active-video-title").html($(this).find(".hp-video-title").html());
    $(".hp-active-video-date").html($(this).find(".hp-video-date").html());
    $('.hp-active-iframe').attr('src', URL);
    /* Added */
    $('.hp-video-img-w.hp-hqdefault-w').removeClass("active");
    $(this).find('.hp-video-img-w.hp-hqdefault-w').addClass("active");
    
    return false;
  });
}

.full-container {
  width: 100%;
}

.full-container {
  width: 100%;
  margin: 25px 0;
  padding: 25px 0;
}

.content-wrapper {
  padding-top: 0px;
  background-color: none;
  max-width: 1040px;
  max-width: 1170px;
}

.hp-video-embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 0px;
}

.hp-video-left-col {}

.hp-video-right-col a:first-child {
  background-color: #ddd;
}

.hp-video-right-col a:last-child {
  margin-bottom: 0px;
}

.hp-active-iframe-wrapper {
  float: left;
  width: 100%;
  background-color: #f5f5f5;
}

.hp-video-embed-container iframe,
.hp-embed-container object,
.hp-embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hp-video-item-w {
  background-color: #ccc;
}

.hp-hqdefault-w {
  max-height: 66px;
  max-width: 120px;
  /* overflow: hidden; removed */
  position: relative;
  width: 30%;
}

.hp-video-img-w {
  position: relative;
  width: 100%;
  /* overflow: hidden; removed */
  float: left;
}

/* Added */
.hp-video-img-w.hp-hqdefault-w.active::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 30px;
  border-color: transparent transparent transparent red;
}

.hp-video-details {
  width: 65%;
  float: left;
}

.hp-video-title {
  font-size: 20px;
  margin-top: 0px;
  margin-left: 10px;
}

.hp-video-title {
  font-size: 13px;
  font-weight: 700;
  padding-top: 10px;
  margin-top: 0px;
  margin-left: 10px;
}

.hp-video-a {
  display: inline-block;
  width: 100%;
  margin-bottom: 7px;
}

@media (max-width:991px) {
  .hp-video-left-col {
    width: 100%;
  }
  .hp-video-right-col {
    width: 100%;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-container bg-light-gray">
  <div class="container content-wrapper">
    <div class="row">
      <div class="col-md-7 col-sm-6 hp-video-left-col">
        <div class="hp-active-iframe-wrapper hp-video-embed-container">
          <iframe id='activeIFrame' class='hp-active-iframe' width='100%' height='324' src="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1"></iframe>
        </div>
      </div>
      <div class="col-md-5 col-sm-6 hp-video-right-col">
        <a class="hp-video-a" href="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1">
          <div class="hp-video-img-w hp-hqdefault-w">
            <img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/WzQBSlNqs-k/hqdefault.jpg" title="">
          </div>
          <div class="hp-video-details">
            <h3 class="hp-video-title">Mr. Bean is back on the road ONE </h3>
          </div>
        </a>
        <a class="hp-video-a" href="http://www.youtube.com/embed/uKar-9RCRnI?showinfo=0&modestbranding=1">
          <div class="hp-video-img-w hp-hqdefault-w">
            <img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/uKar-9RCRnI/hqdefault.jpg" title="">
          </div>
          <div class="hp-video-details">
            <h3 class="hp-video-title">Mr. Bean is back on the road TWOOOOOO</h3>
          </div>
        </a>
        <a class="hp-video-a" href="http://www.youtube.com/embed/xIOP1PLjUTs?showinfo=0&modestbranding=1">
          <div class="hp-video-img-w hp-hqdefault-w">
            <img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/xIOP1PLjUTs/hqdefault.jpg" title="">
          </div>
          <div class="hp-video-details">
            <h3 class="hp-video-title">Mr. Bean is back on the road Three</h3>
          </div>
        </a>
        <a class="hp-video-a" href="http://www.youtube.com/embed/zUTi89FhSRo?showinfo=0&modestbranding=1">
          <div class="hp-video-img-w hp-hqdefault-w">
            <img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/zUTi89FhSRo/hqdefault.jpg" title="">
          </div>
          <div class="hp-video-details">
            <h3 class="hp-video-title">Mr. Bean is back on the road Four</h3>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>