同时控制 2 个 div 的可见性

发布于 2024-10-31 07:53:03 字数 2171 浏览 1 评论 0原文

我正在尝试使用选项卡式界面在网站上显示内容。第一组 div 是内容(文本),第二组是 div 外部包含文本的 div 中的关联图像,如下所示:

<div id="side-img-container">
 <div class="side-img" id="image_1"><img src="image1.jpg" /></div>
 <div class="side-img" id="image_2"><img src="image2.jpg" /></div>
 <div class="side-img" id="image_3"><img src="image3.jpg" /></div>
 <div class="side-img" id="image_4"><img src="image4.jpg" /></div>
 <div class="side-img" id="image_5"><img src="image5.jpg" /></div>
</div>
<div id="content>
<ul class="tabs">
 <li><a href="#tab_1">Tab 1</a></div>
 <li><a href="#tab_2">Tab 2</a></div>
 <li><a href="#tab_3">Tab 3</a></div>
 <li><a href="#tab_4">Tab 4</a></div>
 <li><a href="#tab_5">Tab 5</a></div>
</ul>
<div class="tab_container">
 <div class="tab_content" id="tab_1">Content 1</div>
 <div class="tab_content" id="tab_2">Content 2</div>
 <div class="tab_content" id="tab_3">Content 3</div>
 <div class="tab_content" id="tab_4">Content 4</div>
 <div class="tab_content" id="tab_5">Content 5</div>
</div>
</div>

这使用以下 Jquery 使选项卡正常工作:

$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute     value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });
});

上面的 javascript 有什么办法可以实现吗?添加/修改,以便在显示内容选项卡时显示相应的图像选项卡,即:tab_1 和 image_1 等。

I'm trying to use a tabbed interface to display content on a website. The first set of divs is the content (text) and the second is an associated image in a div outside the div containing the text as follows:

<div id="side-img-container">
 <div class="side-img" id="image_1"><img src="image1.jpg" /></div>
 <div class="side-img" id="image_2"><img src="image2.jpg" /></div>
 <div class="side-img" id="image_3"><img src="image3.jpg" /></div>
 <div class="side-img" id="image_4"><img src="image4.jpg" /></div>
 <div class="side-img" id="image_5"><img src="image5.jpg" /></div>
</div>
<div id="content>
<ul class="tabs">
 <li><a href="#tab_1">Tab 1</a></div>
 <li><a href="#tab_2">Tab 2</a></div>
 <li><a href="#tab_3">Tab 3</a></div>
 <li><a href="#tab_4">Tab 4</a></div>
 <li><a href="#tab_5">Tab 5</a></div>
</ul>
<div class="tab_container">
 <div class="tab_content" id="tab_1">Content 1</div>
 <div class="tab_content" id="tab_2">Content 2</div>
 <div class="tab_content" id="tab_3">Content 3</div>
 <div class="tab_content" id="tab_4">Content 4</div>
 <div class="tab_content" id="tab_5">Content 5</div>
</div>
</div>

This uses the following Jquery to make the tabs work:

$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute     value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });
});

Is there any way the above javascript can be added to/adapted so that the corresponding image tab is displayed when a content tab is displayed ie: tab_1 and image_1 etc. ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

∞梦里开花 2024-11-07 07:53:03

首先,您的 HTML 无效 - 您正在关闭带有 标记的

  • 列表项。您还忘记关闭 #content 元素的 id 属性值周围的引号。
  • 原来的JavaScript代码效率不是特别高,所以我们不妨重写一下。使用此代码,您不需要每个选项卡内容都具有 class 属性,这肯定会大大减轻 HTML 的负担:

    // Select all of the tab contents, then hide them
    // Cache elements that need to be reused
    var tabContents = $(".tab_container, #side-img-container").children().hide(),
        tabs = $("ul.tabs li");
    
    // Show the first tab's content, and add in the active class
    tabs.first().addClass("active");
    tabContents.filter(':first-child').show();
    
    // Attach click event handler
    tabs.click(function() {
        // Cache the clicked on tab element
        var $this = $(this),
            // Obtain the element index number
            activeTab = $this.index() + 1;
    
        // Only change tabs if the clicked tab isn't active
        if (!$this.hasClass('active')) {
            // Remove the 'active' class from the original anchor and add it to the current one
            $this.addClass('active').siblings().removeClass('active');
            // Hide all of the other tabs and fade in the active one
            tabContents.siblings().hide().filter(':nth-child(' + activeTab + ')').fadeIn();
        }
    
        return false;
    });
    

    请在此处查看一个简单的演示:http://jsfiddle.net/ND7nU/

    First of all, your HTML is invalid - you're closing <li> list items with </div> tags. You've also forgotten to close the quote surrounding the #content element's id attribute value.

    The original JavaScript code isn't particularly efficient, so we might as well rewrite it. Using this code, you do not need each of the tab content to have a class attribute, which certainly lightens up the HTML quite a bit:

    // Select all of the tab contents, then hide them
    // Cache elements that need to be reused
    var tabContents = $(".tab_container, #side-img-container").children().hide(),
        tabs = $("ul.tabs li");
    
    // Show the first tab's content, and add in the active class
    tabs.first().addClass("active");
    tabContents.filter(':first-child').show();
    
    // Attach click event handler
    tabs.click(function() {
        // Cache the clicked on tab element
        var $this = $(this),
            // Obtain the element index number
            activeTab = $this.index() + 1;
    
        // Only change tabs if the clicked tab isn't active
        if (!$this.hasClass('active')) {
            // Remove the 'active' class from the original anchor and add it to the current one
            $this.addClass('active').siblings().removeClass('active');
            // Hide all of the other tabs and fade in the active one
            tabContents.siblings().hide().filter(':nth-child(' + activeTab + ')').fadeIn();
        }
    
        return false;
    });
    

    See a simple demo of this here: http://jsfiddle.net/ND7nU/

    独自唱情﹋歌 2024-11-07 07:53:03

    试试这个:

    $('div.side-img').hide();
    $('div.side-img:first').show();
    
    $("ul.tabs li").click(function() {
        $('div.side-img').eq($(this).index()).show();
        // remaining code 
    }
    

    Try this :

    $('div.side-img').hide();
    $('div.side-img:first').show();
    
    $("ul.tabs li").click(function() {
        $('div.side-img').eq($(this).index()).show();
        // remaining code 
    }
    
    情仇皆在手 2024-11-07 07:53:03

    从我的头顶来看,有点快速和肮脏:

    var s = activeTab.attr('id');
    var num = s.substr(4, 1);
    var imgstr = "#image-" + num;
    
    $(".side-img").hide();
    $(imgstr).show();
    

    编辑:您可以在选项卡单击事件处理程序中的任何位置使用它。
    编辑 2: var s = etc 修复。

    Bit quick and dirty from the top of my head:

    var s = activeTab.attr('id');
    var num = s.substr(4, 1);
    var imgstr = "#image-" + num;
    
    $(".side-img").hide();
    $(imgstr).show();
    

    Edit: You can use this anywhere in the tab click event handler.
    Edit 2: var s = etc Fix.

    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文