Question

我正在尝试使用选项卡式界面来显示网站上的内容。第一组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等？

Answer 1

首先，您的HTML无效 - 您正在使用<li>标记关闭</div>个列表项。您还忘记关闭#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/

Answer 2

试试这个：

$('div.side-img').hide();
$('div.side-img:first').show();

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

Answer 3

从我的头顶快速而肮脏：

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

$(".side-img").hide();
$(imgstr).show();

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

Answer 4

选中此example on jsfiddle.net

同时控制2个div的可见性

4 个答案: