Question

我正在尝试在标签内添加视频，这是一个示例

＆＃xA;＆＃xA;

 ＆lt; script data-config =“// config.playwire.com/ 17003 / videos / v2 / 3745040 / zeus.json“data-css =”// cdn.playwire.com/bolt/js/zeus/skins/default.css“data-height =”480“data-width =”853 “src =”// cdn.playwire.com/bolt/js/zeus/embed.js“type =”text / javascript“＆gt;＆lt; / script＆gt;＆＃xA;

＆＃ xA;＆＃xA;

我的问题是我每次更改标签时都不会显示视频

＆＃xA;＆＃xA;

iframe视频正在运行

＆＃xA ;＆＃xA;

这是我到目前为止所尝试的内容：

＆＃xA;＆＃xA;

jQuery：

＆＃xA;＆＃xA;

  $（'document'）。ready（function（）{＆＃xA; $（“＃sidebar”）。tabs（{＆＃xA; event：“click”，＆＃xA; activate：function（event） ，ui）{＆＃xA; console.log（ui）;＆＃xA; var _tab = ui.newTab;＆＃xA; $（'＃sidebar li'）。removeClass（'active'）;＆＃xA; $（_ tab）.addClass（'active'）;＆＃xA;}，＆＃xA;}）;＆＃xA;}）;＆＃xA;

＆＃xA;＆＃ xA;

HTML：

＆＃xA;＆＃xA;

 ＆lt; div id =“s idebar“＆gt;＆＃xA;＆lt; ul＆gt;＆＃xA;＆lt; li＆gt;＆lt; a href =”＃tabs-1“＆gt; Video1＆lt; / a＆gt;＆lt; / li＆gt;＆＃xA;＆lt; li＆gt; ;＆lt; a href =“＃tabs-2”＆gt; Video2＆lt; / a＆gt;＆lt; / li＆gt;＆＃xA;＆lt; li＆gt;＆lt; a href =“＃tabs-3”＆gt; Video3＆lt; / a＆gt; ＆lt; / li＆gt;＆＃xA;＆lt; / ul＆gt;＆＃xA;＆lt; div id =“tabs-1”＆gt;＆＃xA;＆lt; script data-config =“// config.playwire.com/ 17003 / videos / v2 / 3714373 / zeus.json“data-css =”// cdn.playwire.com/bolt/js/zeus/skins/default.css“data-height =”390“data-width =”630 “src =”// cdn.playwire.com/bolt/js/zeus/embed.js“type =”text / javascript“＆gt;＆lt; / script＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;＆lt; ; div id =“tabs-2”＆gt;＆＃xA;＆lt; script data-config =“// config.playwire.com/17003/videos/v2/3745793/zeus.json”data-css =“// cdn.playwire.com/bolt/js/zeus/skins/default.css“data-height =”390“data-width =”630“src =”// cdn.playwire.com/bolt/js/zeus/embed .js“type =”text / javascript“＆gt;＆lt; / script＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;＆lt; div id =”tabs-3“＆gt;＆＃xA;＆lt;脚本数据-config =“// config.playwire.com/17003/videos/v2/3745040/zeus.json”data-css =“// cdn。 playwire.com/bolt/js/zeus/skins/default.css“data-height =”390“data-width =”630“src =”// cdn.playwire.com/bolt/js/zeus/embed.js “type =”text / javascript“＆gt;＆lt; / script＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;

＆＃xA;＆ #xA;

http://jsfiddle.net/UnYx9/6/

＆＃XA;

Answer 1

您的其他视频没有高度。

试试这个：

#tabs-2 div, #tabs-3 div {
     height: 390px !important;
}

Answer 2

您可以使用此代码：

＆＃13;

$(document).ready(function () {
    $(document).on("scroll", onScroll);
    
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

＆＃13;

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 100%;
    height: 75px;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.light-menu {
    width: 100%;
    height: 75px;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 15px 0 0 0;
}
#menu-center ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: inline;
}
.active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 50px;
}
#home {
    background-color: grey;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(images/home-bg2.png);
}
#portfolio {
    background-image: url(images/portfolio-bg.png);
    height: 100%;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100%;
    width: 100%;
}
#contact {
    background-color: red;
    height: 100%;
    width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="m1 menu">
    <div id="menu-center">
        <ul>
            <li><a class="active" href="#home">Home</a>

            </li>
            <li><a href="#portfolio">Portfolio</a>

            </li>
            <li><a href="#about">About</a>

            </li>
            <li><a href="#contact">Contact</a>

            </li>
        </ul>
    </div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>

＆＃13;

带有<script> removeClass和addClass的选项卡

2 个答案: