как внедрить содержимое в первый Таб

255

26 июля 2017, 23:56

Как засунуть контент в первый таб Видео ? и при нажатии на таб MATTRESSES контент первого таба исчезал и выводился контент второго таба ?

<div id="centerLayer">
    <img src="sw/iconX.png" class="btn_x" onclick="closeModal();">
    <div class="header">
        <img src="resources/image/logo.png" alt="poster"/>
                 <input type="radio" name="nav" id="tab_1" checked="checked"/>
                     <label for="tab_1" style="margin-left:96px;">Videos</label>
                 <input type="radio" name="nav" id="tab_2"/>
                     <label for="tab_2">Mattresses</label>
                <input type="radio" name="nav" id="tab_3"/>
                     <label for="tab_3">Store Locator</label>
    </div>
    <div id="content_tab_1">
        <video class="videoContent" id="video" autoplay poster="videos/one.png"></video>
        <div class="but-link_1" data-video="resources/1.mov"  id="first"></div>
        <div class="but-link_2" data-video="resources/2.mov" id="second"></div>
    </div>
    <div class="bottom">
        <a href="#">POST TO FACEBOOK</a>
        <p>SHARE THE MOST IMPORTANT TECH REVEAL <br> OF 2017 WITH YOUR FRIENDS</p>
        <div class="social_item">
            <div class="fb_item">
                <a href="#"><img src="resources/image/fb.png"/></a>
            </div>
            <div class="twitter_item">
                <a href="#"><img src="resources/image/tt.png"/></a>
            </div>
            <div class="tube_item">
                <a href="#"><img src="resources/image/tube.png"/></a>
            </div>
        </div>
        <div class="discover_btn">
            <p class="dis_text">DISCOVER MORE</p>
        </div>
    </div>

Answer 1

HTML:

<div class="tabs">
    <ul class="tabs-head">
        <li class="tab active">some head</li>
        <li class="tab">some head</li>
    </ul>
    <ul>
        <li class="tab-item">
            some content
        </li>
        <li class="tab-item">
            some content
        </li>
    </ul>
</div>

JS:

(function($){
    $.fn.tabs=function(){
        var parent=$(this);
        $(parent).each(function(){
            var elem=$(this);
            $(elem).find(".tab-item").not(":first").hide();
            $(elem).find(".tabs-head .tab").show().click(function(){
                var ind=$(this).index();
                $(elem).find(".tabs-head .tab").removeClass("active").eq(ind).addClass("active");
                $(elem).find(".tab-item").hide().eq(ind).fadeIn();
                return false;
            }).eq(0).addClass("active");
        });
    };
})(jQuery);

Вызов: