[英]javascript click image display
What I'm trying to do is, when one of six divs is clicked, a separate div will have 3 specific divs appear in it. 我想做的是,当单击六个div之一时,一个单独的div会出现3个特定的div。 Each of the original six divs have three similar but different divs related to it. 原始的六个div中的每个div都具有三个与此相似但不同的div。
http://jsfiddle.net/petiteco24601/hgo8eqdq/ http://jsfiddle.net/petiteco24601/hgo8eqdq/
$(document).ready(function () {
$(".talkbubble").mouseout(function(){
$(".sidebar").show();
});$
$(".talkbubble").click(function(){
$
How do I make it so that when you click a "talkbubble" div, a different "sidebar" div appears with all its contained elements, and when you mouseout, the first talkbubble div automatically activates? 如何做到这一点,以便当您单击“ talkbubble” div时,将出现一个不同的“ sidebar” div及其所有包含的元素,并且当您将鼠标移出时,第一个talkbubble div会自动激活?
Here is a demo of how to do this: http://jsfiddle.net/n1xb48z8/2/ 以下是有关如何执行此操作的演示: http : //jsfiddle.net/n1xb48z8/2/
The main part of this example is some javascript that looks like this: 此示例的主要部分是一些如下所示的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') will get you the attribute data-some-name="" on the specific element, this is a html 5 attribute and if you do not want to use it you can instead give each of the elements their own class names such as: .data('some-name')将为您提供特定元素的data-some-name =“”属性,这是一个html 5属性,如果您不想使用它,可以给每个元素他们自己的类名,例如:
<div class="sidebarContent subBarContent_1">
<!-- content -->
</div>
and use the '.subBarContent_1' as your jquery selector instead. 并使用'.subBarContent_1'作为您的jquery选择器。 You would then also have to have some sort of data attached to your clickable divs to identify which one you wanna show, you could use a hidden field to do that like: 然后,您还必须将一些数据附加到可点击的div上,以标识您想要显示的数据,您可以使用隐藏字段来执行以下操作:
<input type="hidden" class="subContentSelector" value="subBarContent_1" />
The javascript for that looks like this: 该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();
}
Ps. PS。 the overflow:hidden css is because chrome was messing up the placement of the sidebar content otherwise... oh chrome, you silly goose 溢出:隐藏的css是因为chrome弄乱了侧边栏内容的位置,否则...哦,chrome,你这傻瓜
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.