javascript 点击图片显示

Question

我想要做的是，当点击六个 div 之一时，一个单独的 div 中会出现 3 个特定的 div。最初的六个 div 中的每一个都有三个相似但不同的 div 与之相关。

http://jsfiddle.net/petiteco24601/hgo8eqdq/

$(document).ready(function () {
    $(".talkbubble").mouseout(function(){
        $(".sidebar").show();
});$
    $(".talkbubble").click(function(){
        $

如何做到这一点，以便当您单击“talkbubble” div 时，会出现一个不同的“sidebar” div 及其所有包含的元素，并且当您鼠标移出时，第一个 talkbubble div 会自动激活？

Answer 1

这里是如何做到这一点的演示：http://jsfiddle.net/n1xb48z8/2/

这个例子的主要部分是一些看起来像这样的javascript：

$(document).ready(function(){
    showSideBar(1);
    $('.expander').click(function(){
        var sidebarIndex = $(this).data('sidebar-index');
        showSideBar(sidebarIndex);
    });
    $('#Container').mouseleave(function(){
        showSideBar(1);
    });

});

function showSideBar(index){
    $('.sidebarContent').hide();
    $('.sidebarContent[data-index="' + index + '"]').show();
}

.data('some-name') 将为您提供特定元素上的属性 data-some-name=""，这是一个 html 5 属性，如果您不想使用它，您可以改为给每个元素的它们自己的类名，例如：

<div class="sidebarContent subBarContent_1">
    <!-- content -->
</div>

并使用 '.subBarContent_1' 作为您的 jquery 选择器。然后，您还必须将某种数据附加到您的可点击 div 以确定您想要显示哪个，您可以使用隐藏字段来执行此操作：

<input type="hidden" class="subContentSelector" value="subBarContent_1" />

这个 javascript 看起来像这样：

$(document).ready(function(){
    showSideBar(1);
    $('.expander').click(function(){
        var sidebarSelector = $(this).find('.subContentSelector').val();
        showSideBar(sidebarSelector );
    });
    $('#Container').mouseleave(function(){
        showSideBar('subBarContent_1');
    });

});

function showSideBar(selector){
    $('.sidebarContent').hide();
    $('.sidebarContent.' + selector).show();
}

附言。溢出：隐藏的 css 是因为 chrome 弄乱了侧边栏内容的位置，否则......哦，chrome，你这个傻鹅