个人中心
gpt4 book ai didi

jquery - 更改显示 :none to display:block shows inconsistent behavior on different browsers

转载 作者：行者123 更新时间：2023-11-28 10:19:53 24 4
gpt4 key购买 nike

我有一个珠宝画廊页面，其中包含几个链接到单独的 div 的缩略图，这些 div 在链接的 CSS 中使用 display:none Conceal 。每个 Conceal 的 div 都有一个更大的珠宝图像、一些文本以及一个 Facebook Like 按钮和一个 Twitter Tweet 按钮。

我最初使用 visibility:hidden 并切换到 visibility:visible，但是 Conceal div 上的 Facebook 按钮显示了出来 - 我相信是 Facebook 的 javascript 的结果耗材(使用 Facebook Like 按钮的部分编码？)。 Conceal 层上的 FB 按钮显示在可见层内容的顶部。

我还尝试使用不透明度来 Conceal 图层，直到用户单击缩略图。 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 按钮不会为其他 div 显示。

Firefox 在 Mac OS 和 Win 上的行为是混合的。加载初始元素的 div 有效，但 Facebook 按钮在大约 35 秒后消失。在通过单击缩略图显示的 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>&#8226; Glass Ruby beads wrapped on Gold filled wire around a 10mm Swarovski Pearl</li>
        <li>&#8226; Gold Filled hand forged ear wires</li>
        <li>&#8226; 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>&#8226; Mint Chalcedony measure 1 2/16"</li>
        <li>&#8226; 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>&#8226; Faceted Briolette Gemstones measureing 1/2"</li>
        <li>&#8226; 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

在此提前感谢我的第一个问题。

最佳答案

这个问题的解决方案原来是使用 Facebook 按钮代码的 iFrame 版本，而不是带有 Facebook SDK.js 的 HTML5 版本。这是另一位开发人员在远离该板的情况下建议的。

我要离开测试页面，它使用 HTML5 Facebook 编码。

回顾:在 Windows 7 上使用 IE11 无效。它在 Firefox Windows 上“有效”，但 Facebook 按钮在大约 45 秒后在第二和第三项上消失。适用于 Win 和 Mac OS 上的其他浏览器。

关于jquery - 更改显示 :none to display:block shows inconsistent behavior on different browsers，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24068611/

24 4 0
文章推荐： javascript - 调整嵌入的谷歌地图
文章推荐： javascript - 如何使用 JavaScript 交换屏幕上的元素
文章推荐： php - 如何 $_GET [' ' ] 从 mod_modulenamet/mpl/default.php 中的 $document->addStylesheet() 到 joomla 模块的 css.php 文件的值
文章推荐： javascript - 如何在特定元素上粘贴上下文菜单
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com