0
我有一個珠寶畫廊頁面，有幾個縮略圖圖像鏈接到單獨的div，在鏈接的CSS中使用display:none隱藏。每個隱藏的div都有一個較大的珠寶圖像，一些文字，再加上一個Facebook Like按鈕和一個Twitter Tweet按鈕。我最初使用visibility:hidden並切換到visibility:visible，但隱藏div上的Facebook按鈕顯示出來 - 我相信是由Facebook提供的javascript（使用Facebook Like按鈕的編碼的一部分？）的結果。隱藏層上的FB按鈕顯示在可見圖層內的頂部。更改顯示：無顯示：塊顯示在不同瀏覽器上的行爲不一致
我也嘗試使用不透明度來隱藏圖層，直到用戶單擊縮略圖。到目前爲止，display:block技術工作得很好。
頁面現在加載第一個縮略圖的div，使display:block可以通過內聯完成。點擊另一個縮略圖會觸發一個jQuery函數，將關聯的div切換到display:block。我在這裏找到了jQuery的功能：https://stackoverflow.com/a/4261534/3712201
在Mac OS和Windows 7上Safari瀏覽器和Chrome瀏覽器的所有工作都很好。在IE 11上，Facebook和Twitter按鈕適用於頁面上的初始項目，但Facebook按鈕不會「 t顯示其他divs。
Firefox的行爲在Mac OS和Win上都是混合的。加載初始項目的div工作，但約35秒後Facebook按鈕消失。在點擊縮略圖顯示的div上，Twitter按鈕不可點擊，直到Facebook按鈕撤消其行爲。
HTML
<!doctype html>
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Handmade Earrings</title>
<link href="test_styles_stack.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<script language="JavaScript">
$(document).ready(function(){
$(".gridRow a").click(function(event){
event.preventDefault();
});
});
</script>
<script type="text/javascript">
function toggleVisibility(newSection) {
$(".grid_bigImage").not("#" + newSection).hide();
$("#" + newSection).show();
}</script>
<div id="fb-root"></div>
<script language="JavaScript">(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="bigImage_wrapper">
<div class="grid_bigImage" id="ear1" style="display:block"><img src="images/bEar_RubyPearlWireWrap.jpg" width="620" height="355" alt=""/>
<p>RUBY AND SWAROVSKI PEARL CLUSTER EARRINGS</p>
<ul>
<li>• Glass Ruby beads wrapped on Gold filled wire around a 10mm Swarovski Pearl</li>
<li>• Gold Filled hand forged ear wires</li>
<li>• Measures approximately 1 1/2" in length from top of ear wire</li>
</ul>
<div class="fb-like" style="float:left; margin-right:10px; width:47px; height:20px" id="fbLike1" data-href="http://webkazoo.com/test/earrings.html" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://webkazoo.com/test/earrings.html" data-text="Check out the Ruby & Swarovski Pearl Cluster Earrings" data-count="none">Tweet</a>
<script language="JavaScript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="grid_bigImage" id="ear2"><img src="images/bEar_MintChalcedonyHematite.jpg" width="514" height="620" alt=""/>
<p>MINT CHALCEDONY HEMATITE CLUSTER EARRINGS</p>
<ul>
<li>• Mint Chalcedony measure 1 2/16"</li>
<li>• 3mm faceted Hematite wire wrapped stones (14K Gold Filled)</li>
</ul>
<div class="fb-like" style="float:left; margin-right:10px; width:47px; height:20px" id="fbLike2" data-href="http://webkazoo.com/test/earrings2.html" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://webkazoo.com/test/earrings2.html" data-text="Check out the Mint Chalcedony Hematitle Cluster Earrings" data-count="none">Tweet</a>
<script language="JavaScript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="grid_bigImage" id="ear3"><img src="images/bEar_FacetGemstoneBriolette.jpg" width="566" height="620" alt=""/>
<p>FACETED GEMSTONE BRIOLETTE EARRINGS WITH MIXED WRAPPED STONES</p>
<ul>
<li>• Faceted Briolette Gemstones measureing 1/2"</li>
<li>• 3mm faceted mixed wire wrapped stones (sterling silver)</li>
</ul>
<div class="fb-like" style="float:left; margin-right:10px; width:47px; height:20px" id="fbLike3" data-href="http://webkazoo.com/test/earrings3.html" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://webkazoo.com/test/earrings3.html" data-text="Check out the Faceted Gemstone Briolette Earrings" data-count="none">Tweet</a>
<script language="JavaScript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</div>
<div class="insideContent">
<div class="gridWrapper">
<h1>EARRINGS</h1>
<div class="gridRow"><a href="#" onClick="toggleVisibility('ear1');"><img src="images/sEar_RubyPearlWireWrap.jpg" alt="" width="80" height="80" class="gridRow_item" id="thumb1"/></a><a href="#" onClick="toggleVisibility('ear2');"><img src="images/sEar_MintChalcedonyHematite.jpg" alt="" width="80" height="80" class="gridRow_item" id="thumb2"/></a><a href="#" onClick="toggleVisibility('ear3');"><img src="images/sEar_FacetGemstoneBriolette.jpg" alt="" width="80" height="80" class="gridRow_itemLast" id="thumb3"/></a></div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
border: 0;
padding-bottom:50px;
}
#wrapper {
width: 1000px;
position: relative;
margin:0 auto;
top:0;
background-color:#daf5f3;
}
h1 {
position:relative;
top:0;
left:0;
margin-top:0;
padding-top:0;
font-family:"copperplate_fsregular", Palatino, "Trebuchet MS", sans-serif;
font-size:14px;
font-weight:bold;
line-height:18px;
letter-spacing:2px;
}
img {
border:0;
}
.insideContent {
position: relative;
width: 920px;
margin: 0 auto;
padding:20px 40px 0 40px;
}
.gridWrapper {
position:relative;
width:260px;
min-height:720px;
padding-right:40px;
left:0;
top:0;
}
.gridWrapper p {
position:relative;
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
color: #000000;
text-align:left;
}
.gridRow {
position:relative;
width:260px;
height:80px;
margin-bottom:15px;
}
.gridRow_item {
float:left;
width:80px;
margin-right:10px;
}
.gridRow_itemLast {
float:left;
width:80px;
margin-right:0;
}
.bigImage_wrapper {
position:relative;
width:620px;
}
.grid_bigImage {
position:absolute;
width:620px;
height:620px;
top:20px;
left:340px;
display:none;
background-color:#daf5f3;
z-index:2;
}
.grid_bigImage p, ul, li {
position:relative;
width:560px;
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
color: #000000;
}
.grid_bigImage p, ul {
left:0;
margin:7px 0 0 0;
padding:0;
}
.grid_bigImage li {
display:inline;
margin-left:0;
}
測試頁面在這裏：http://webkazoo.com/test/test_earrings_stack.html
在此先感謝我的第一個問題在這裏。
我添加了對使用可見性和不透明度的先前嘗試的引用;和切換功能的來源。 – webkazoo