javascript点击图像显示

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

---

我如何使它在您单击“talkbubble”div时，一个不同的“侧边栏”div及其包含的所有元素都会出现，而当您将鼠标移出时，第一个talkbubble div会自动激活

下面是一个演示如何做到这一点：

本例的主要部分是一些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>

---

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

为什么有这么多的

$（文档）.ready（函数（））{

？您的代码没有编译。您有一个语法错误。您应该停下来看看代码的格式和正确性。您有语法错误，嵌套了document.ready函数，而且缩进很差。清除代码是成功的第一步。使用小提琴中的TidyUp按钮，然后检查jslint。您应该“美化”（即格式化）您的代码，以便您可以更容易地看到至少缺少一个

}

；-）你是在尝试这样做吗？哦，我的天啊，谢谢你！你的代码实际上很有意义。我唯一的问题是，除了个人喜好之外，还有什么理由不依赖HTML5吗？我已经尝试在旧版本的DreamWeaver上使用数据索引方法，当我尝试在浏览器中从DreamWeaver查看它时（Chrome），它不起作用。我很乐意帮忙！：）不使用HTML5的主要原因是您的站点/应用程序必须在非常旧的系统上运行。一些公司仍然使用windows XP作为他们的操作系统选择，因为他们需要使用vista/7/8上仍然不可用的应用程序。我不知道有多少用户仍然使用这些旧系统，但我两年前参与的一个项目必须在abl上运行由于“其他应用程序在较新系统上不可用”，因此在windows XP和一些旧版本IE上使用HTML5=）（移动浏览器“全部”支持HTML5 btw）

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

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

$(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();
}