在一个区域显示隐藏div [英] Show hide div in one area
问题描述
我想创建一个show hide div，它可以帮助您找到任何想要的东西。显示/隐藏在一个固定区域的div。
我想在我的页面的一半和页面的另一半上画一个大拇指画廊我想要显示完整的个人资料与此拇指相关联，所以当我点击另一个拇指时，前一个拇指的div消失了，并且新的拇指div出现在它的位置上。
我正在寻找类似这样的东西：（当你点击一个拇指时文本出现在左侧）
http：// www.tcsdigitalworld.com/team
我已经在另一个网站上实现了一些相似的功能，但是我想添加文本并显示更多内容内容，如配置文件。
你可以看到我在这里做了什么：
http://www.dansiop.com/epbs/index.php/brides/gowns/paloma-blanca.html
如果任何人都可以将我指向正确的方向我真的很感激。
非常感谢
更新：
谢谢大家的输入，但是当谈到javascript时，我的确有点大规模的n00b。
我曾尝试在网站上做所有这些希望它继续下去，我不能让它们中的任何一个工作。我可以让他们中的一些人在某些时候工作，但并不是他们应该做的。
最接近我工作的是使用ErnestasStankevičius提供的样本
但是你可以看到它不起作用，因为当我点击他们消失的拇指时 - 它不会在上面的链接上做，但它在我的网站上。我也不知道我在哪里放置了什么内容来使它工作。
我在哪里放置拇指src，我在哪里放置配置文件内容，主图像等？
我称之为我的标题：
<脚本>
$（document）.ready（function（）{
$（'。thumb'）。click（function（）{
$（'＃main'）。fadeOut（500）。 html（$（this）.children（'。bla'）。html（））。fadeIn（200）;
}）
}）;
< / script>
我在我的css中设置了它（不是我最终想要的，而是它在您获得：
$ p $ #main {color：red}
.bla {display：none}
.thumb { cursor：pointer; background-color：blue; height：100px; width：100px; margin：5px}
和我使用这个HTML：
< div id =main> sdfsdfsdf< / div>
< div class =thumb>
< div class =bla> asdasdasd1< / div>
< / div>
< div class =thumb >
< div class =bla> asdasdasd2< / div>
< / div>
< div class =thumb>
< div class =bla> asdasdasd3< / div>
< / div>
< div class =thumb>
< div class =bla> asdasdasd4< / div>
< / div>
拇指上的文字会随着我的需要而改变，但拇指消失（不是我想要的）
感谢我n先行。
Dan
在richardneililagan答案...
以下是一些额外的HTML和一些JS：
< div id =leftpane>
< img class =thumbid =img_1/>
< img class =thumbid =img_2/>
< img class =thumbid =img_3/>
< img class =thumbid =img_4/>
< / div>
< div id =rightpane>
< div id =prof_1class =profile>图片1的配置文件< / div>
< div id =prof_2class =profile>图片2的配置文件< / div>
<！ - etc - >
< / div>
然后你可以这样处理你的事件：
$（。thumb）。click（function（）{
var id = $（this）.attr（id）。split （）; $ b $（＃prof_+ id）.fadeIn（）;
}
希望有帮助！
编辑
好的，根据我以前写的代码，这是可行的（在这里测试： http://jsfiddle.net/deleteman/94jQS/ ）
HTML
< div id =leftpane>
< a class =thumbhref =＃ >< img id =img_1src =http://img1.jarfil.net/3/test_iq-pixels_5x5_v1-a.png/>< / a>
< a class =thumbhref =＃>< img id =img_2src =http://www.kriptopolis.org/images/clasifica.jpg/>< / a>
< a class =thumbhref =＃>< img id =img_3 SRC = http://www.blogdetrabajo.com/wp-content/uploads/test.jpg/>< / A>
< / div>
< div id =rightpane>
< div id =prof_1class =profile>图片1的配置文件< / div>
< div id =prof_2class =profile>图片2的配置文件< / div>
< div id =prof_3class =profile>图片3的配置文件< / div>
< / div>
CSS
a.thumb img {
width：100px;
}
.profile {
display：none;
}
JS
$（。thumb）。click（function（）{
var id = $（this）.children（img）。first （）.attr（id）。split（_）。pop（）;
$ b $（。profile）。fadeOut（'slow'）;
$（ #prof_+ id）.fadeIn（）;
return false;
}）;
现在好多了吗？这是否适合你？
I have been looking all day to try and find something that matches what I want but I cant find anything anywhere.
I want to create a show hide div that shows / hides the div in one fixed area.
I want a gallery of thumbs on half my page and in the other half of the page I want to display the full profile associated to that thumb, so when i click on another thumb the previous thumb's div disappears and the new thumbs div appears in its place.
I am looking to achieve something like this: (just how the text appears on the left hand side when you click on a thumb) http://www.tcsdigitalworld.com/team
I have already achieved something simular on another website where the image swaps but I want to add text to this and show more content such as a profile. You can see what I have done there here: http://www.dansiop.com/epbs/index.php/brides/gowns/paloma-blanca.html
If anyone can point me in the right direction I would really appreciate it.
Many thanks
UPDATE: Thank you all for your input but I am a bit of a massive n00b when it comes to javascript.
I have tried doing all of these on the site that I want it to go on and I cant get any of them working. I can get some of them working at some point but not as it should.
The closest I got it working was using the sample that Ernestas Stankevičius offered
But as you can see it isnt quite working as when I click on the thumb they disappear - it doesnt do it on the link above but it does on my site. I am also not sure where I place what content to make it work.
Where do I place the thumb src and where do i place the profile content, main image etc?
I call this is my header:
<script>
$(document).ready(function(){
$('.thumb').click(function(){
$('#main').fadeOut(500).html($(this).children('.bla').html()).fadeIn(200);
})
});
</script>
I set this in my css (not what I want in the end but its a start as you sugested:
#main { color: red }
.bla { display: none }
.thumb { cursor: pointer; background-color: blue; height: 100px; width: 100px; margin: 5px }
and I use this html:
<div id="main">sdfsdfsdf</div>
<div class="thumb">
<div class="bla">asdasdasd1</div>
</div>
<div class="thumb">
<div class="bla">asdasdasd2</div>
</div>
<div class="thumb">
<div class="bla">asdasdasd3</div>
</div>
<div class="thumb">
<div class="bla">asdasdasd4</div>
</div>
Just to clarify, when I click on the thumbs the text changes as I want it to but the thumbs disappear (not as I want it to)
Thanks in advance.
Dan
To expand a bit on richardneililagan answer...
Here is a bit of extra HTML and some JS:
<div id="leftpane">
<img class="thumb" id="img_1" />
<img class="thumb" id="img_2"/>
<img class="thumb" id="img_3"/>
<img class="thumb" id="img_4"/>
</div>
<div id="rightpane">
<div id="prof_1" class="profile">Profile for image 1</div>
<div id="prof_2" class="profile">Profile for image 2</div>
<!-- etc -->
</div>
Then you can have somehting like this to handle your events:
$(".thumb").click(function() {
var id = $(this).attr("id").split("_").pop();
$(".profile").fadeOut();
$("#prof_" + id).fadeIn();
}
Hope that helps!
Edit
Ok, based on the code I wrote before, this is working (tested here: http://jsfiddle.net/deleteman/94jQS/)
HTML
<div id="leftpane">
<a class="thumb" href="#"><img id="img_1" src="http://img1.jarfil.net/3/test_iq-pixels_5x5_v1-a.png"/></a>
<a class="thumb" href="#"><img id="img_2" src="http://www.kriptopolis.org/images/clasifica.jpg"/></a>
<a class="thumb" href="#"><img id="img_3" src="http://www.blogdetrabajo.com/wp-content/uploads/test.jpg"/></a>
</div>
<div id="rightpane">
<div id="prof_1" class="profile">Profile for image 1</div>
<div id="prof_2" class="profile">Profile for image 2</div>
<div id="prof_3" class="profile">Profile for image 3</div>
</div>
CSS
a.thumb img {
width:100px;
}
.profile {
display:none;
}
JS
$(".thumb").click(function() {
var id = $(this).children("img").first().attr("id").split("_").pop();
$(".profile").fadeOut('slow');
$("#prof_" + id).fadeIn();
return false;
});
Is that better now? Would that work for you?
这篇关于在一个区域显示隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
