it-swarm-vi.com

Làm cách nào để triển khai các tab trong bài viết giúp xóa và tải nội dung khi nhấp vào?

Để cụ thể hơn, tôi có 2 trình phát video được tải vào một bài viết trên hai tab khác nhau. Một là sống, một là theo yêu cầu. Họ không chơi Nice cùng nhau, nhưng thật tuyệt khi có sẵn chúng trên các tab thay vì trong hai bài viết khác nhau hoàn toàn.

Tôi đang tìm kiếm một plugin tab hoặc thậm chí chỉ là mã tab mà tôi có thể sử dụng trong bài viết sẽ tải và dỡ nội dung tab để khi bạn ở trên tab 1, nội dung của tab 2 hoàn toàn không được tải và khi bạn nhấp vào trên tab 2, tab 1 được xóa và sau đó tải nội dung của tab 2.

điều này thậm chí có thể, hay tôi chỉ nên sử dụng 2 bài viết khác nhau và một menu để mỗi người chơi ở một trang khác nhau?

1
Brian Peat

Nếu cả hai tab đều chứa iframe, bạn có thể sử dụng $('#iframe').attr('src', 'http://example.com'); để đặt nội dung iframe (và $('#iframe').attr('src', ''); để làm trống nó. Tôi đã tạo một jsfiddle (không có tab) =. Tôi chắc chắn rằng mã này có thể được cải thiện và nó phải được thay đổi để phù hợp với nhu cầu của bạn, nhưng có thể nó sẽ giúp bạn đẩy đúng hướng:

Mã jQuery

jQuery(document).ready(function () {
    jQuery('.tab1').on('click', function (e) {
        $('#iframe2').attr('src', '');
        $('#iframe1').attr('src', 'http://example.com');
        e.preventDefault();
    });
    jQuery('.tab2').on('click', function (e) {
        $('#iframe1').attr('src', '');
        $('#iframe2').attr('src', 'http://example.com');
        e.preventDefault();
    });
});

[~ # ~] html [~ # ~]

<ul>
    <li><a href="#tab1" class="tab1">Tab #1</a> </li>
    <li><a href="#tab2" class="tab2">Tab #2</a> </li>
</ul>
<h2>iframe 1:</h2>
<iframe id="iframe1" frameborder="0" src=""></iframe>
<h2>iframe 2:</h2>
<iframe id="iframe2" frameborder="0" src=""></iframe>
1
johanpw