个人中心
gpt4 book ai didi

jquery - Facebook Like 按钮在 div 中显示时移动整个页面居中

转载 作者：行者123 更新时间：2023-11-28 18:51:02 25 4
gpt4 key购买 nike

我正在尝试将我的 facebook 像按钮一样居中。它位于根据单击的菜单项显示/隐藏的 div 中。当我单击显示该 div(并隐藏其他)的 li(新闻和更新)时，单击时我的整个页面都会移动。奇怪的是，当我在 chrome 中“检查元素”时，它并没有移动。您应该能够从窗口复制和粘贴代码并查看 html(不会加载顶部横幅)。

有明显的 css 错误吗？提前致谢

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Chef's Classic - Knock OUT 'Bout</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <style type="text/css">
div {
    display: block;
}
.tabs {
    text-align:center;
}
.tabs ul {
    display: inline-block;
    margin: 0px;
    padding: 0px 0px 10px 0px;
    /* For IE, the outcast */
    zoom:1;
    *display: inline;
}
.tabs li {
    list-style:none;
    display:inline-block;
    text-align:center;  
}
.tabs a {
    padding:5px 10px;
    display:inline-block;
    background-color:#000000;
    color:#FFFFFF;
    text-decoration:none;
    width:150px;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    -webkit-border-radius: 10px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
    -moz-border-radius: 10px; /* FF1-3.6 */
    border-radius: 10px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
}

.tabs a:hover {
    background-color:#D7181E;
}

.tabs a.active {
    padding:5px 10px;
    display:inline-block;
    background-color:#666666;
    color:#FFFFFF;
    text-decoration:none;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

</style> </head>
  <body style="   background-color:#666666">
  <div id="fb-root"></div>  

    <div style="display:block; width: 800px; margin:0px auto; background-color:#FFFFFF; border-width: 50px 50px 50px 50px; -moz-border-image: url(images/main-border-oil-grey.png) 71 repeat; -webkit-border-image: url(images/main-border-oil-grey.png) 71 repeat; -o-border-image: url(images/main-border-oil-grey.png) 71 repeat; border-image: url(images/main-border-oil-grey.png) 71 repeat;">
      <!--banner-->
      <div style="text-align:center;"> 
        <img height="250" src="images/banner.jpg" alt="Chef's Classic Knock Out Bout" /> 
      </div>
      <!--links-->
      <div class="tabs" style="text-align:center">
        <ul>
          <li> <a href="#pages-about">About</a> </li>
          <li> <a href="#pages-facebook">News &amp; Updates</a> </li>
          <li> <a href="#pages-tickets">Tickets</a> </li>
        </ul>
      </div>
      <!--pages-->
      <div id="pages-about" style="min-height:400px;">

      </div>
      <div id="pages-facebook" style="min-height:400px;">

        <div class="fb-like-box" data-href="http://www.facebook.com/pages/Chefs-Classic-Knock-OUT-Bout/225835004169328"

          data-width="550" data-height="600" data-show-faces="false" data-border-color="#D7181E"

          data-stream="true" data-header="true"> </div>
        <!--<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FChefs-Classic-Knock-OUT-Bout%2F225835004169328&amp;width=550&amp;height=427&amp;colorscheme=light&amp;show_faces=false&amp;border_color=%23D7181E&amp;stream=true&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:550px; height:427px;" allowTransparency="true">
        </iframe>--> </div>
      <div id="pages-tickets" style="min-height:400px;">
      </div>
    </div>
  </body>
  <script type="text/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 = "http://connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script> <script type="text/javascript">
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
    $('.tabs ul').each(function(){
        // For each set of tabs, we want to keep track of
        // which tab is active and it's associated content
        var $active, $content, $links = $(this).find('a');

        // Use the first link as the initial active tab
        $active = $links.first().addClass('active');
        $content = $($active.attr('href'));

        // Hide the remaining content
        $links.not(':first').each(function () {
            $($(this).attr('href')).hide(); //assumes href contains div name
        });

        // Bind the click event handler
        $(this).on('click', 'a', function(e){
            // Make the old tab inactive.
            $active.removeClass('active');
            $content.hide();


            // Update the variables with the new link and content
            $active = $(this);
            $content = $($(this).attr('href'));

            // Make the tab active.
            $active.addClass('active');
            $content.show();

            // Prevent the anchor's default click action
            e.preventDefault();
        });
    });
});
    </script>
</html>

最佳答案

我认为这是窗口滚动条的显示和隐藏。一旦您的所有选项卡中都有内容，这应该不是问题。

关于jquery - Facebook Like 按钮在 div 中显示时移动整个页面居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9267550/

25 4 0
文章推荐： html - 即 7 : border doesn't work as intended
文章推荐： php - 动态切换图像(使用 PHP)以及 CSS 媒体查询？
文章推荐： python - 导入 pyIpopt 时出错
文章推荐： jQuery 和 Z-index 问题
行者123
个人简介

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

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