Question

基于本教程：

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

任何人都可以帮助解释为什么我的内容总是向左移动而不是向左移动保持中心？

我的意思是整个内容div从浏览器窗口的最左侧开始，然后返回到网站的中心。

始终向左移动然后返回中心。

最初，我的网站全部位于浏览器窗口的左侧，现在已决定将其全部移至中心。通过这样做，网站现在全部居中，但是当我点击“功能”标签时，我没有包含在代码中的jquery动画从浏览器的最左边而不是中心执行。

希望我的CSS中有一些东西导致它。另外，我还故意留下了html头标签。

<style type="text/css">
<!--

/** {
  border: 1px solid red !important;
}*/

body {
    background-color: #FFF;
    text-align: center; /* Center align for IE */
}

#navwrapper {
    width: 100%;
}

#header {
    width: 100%;
    height: 113px;
}

#listnav {
    width: 996px;
    height: 59px;
    margin-left: 1px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #393;
    margin: 0 auto; /* Center align for Good browsers like Firefox, Opera, Netscape */
    text-align: left;
}

#listnav ul {
    list-style-type:none;
    padding: 0;
    margin: 0;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
}

#listnav li {
    display: inline;
    float: left;
    margin-right: 4px;
    width: 160px;
    border: 1px solid #990;
    border-bottom: none;
    font-weight: lighter;
    background-color: #9C0;
    background-image: url(images/backtab.jpg);
    background-repeat: repeat-x;
}

#listnav li a {
    padding-top: 15px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 20px;
    color: #FFF;
    text-align: center;
    display: block;
}

li   {
    text-decoration: none;
}
li a  {
    text-decoration: none;
}

#listnav li a:hover {
    text-decoration: none;
    background-color: #71BFEE;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    color: #FFF;
    background-repeat: repeat-x;
}
#listnav li a:active {
    text-decoration: none;
}
#listnav li a#current
{
    color: #FFF;
    background-color: #71BFEE;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FFF;
}

#nav {
    margin: 0 auto; 
}

#content {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    color: #333;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #990;
    border-bottom-color: #990;
    border-left-color: #990;
    padding: 5px;
    background-color: #FFF;
    width: 984px;
    margin: 0 auto; 
    text-align: left;
}

#foot a {
    color: #FF9933;
    float: none;
}
-->
</style>

<script src="jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function()
{
    $("#content").load('home.html');

    $('#nav a').click(function(){
       $("#nav").find("a").removeAttr("id");
       $(this).attr("id" , "current" );
    });

    $('#nav li a').click(function(){  
        var toLoad = $(this).attr('href'); 

        $('#content').hide('fast',loadContent);  

        function loadContent() {  
            $('#content').load(toLoad,'',showNewContent())  
        }  
        function showNewContent() {  
            $('#content').show('normal');  
        }  
        return false;
    });

});

</script>

</head>

<body>
<div id="navwrapper">
 <div id="header">
  <img src="images/header.jpg" width="996" height="112" alt="myWebsite" longdesc="http://www.myWebsite.com" />
 </div>
 <div id="listnav">
   <ul id="nav">
     <li><a href="home.html" id="current">Home</a></li>
     <li><a href="features.html" >Features</a></li>
   </ul>
 </div>
 <div id="content">
    <h2>Welcome!</h2>
 </div>
 <div id="foot">Copyright © 2010 All rights reserved. </div>
</div>
</body>

感谢。

ps人们也可以让我知道如何将我的标题图形图像变成一个href，这样当用户点击它时，会转到一个href网址吗？

Answer 1

这可能是hide() / show()动画的神器（因为你使用的是持续时间）..

如果您尝试使用其他动画，例如slideUp() / slideDown()，则效果正常。

<强> [更新]

代码中的问题是

margin: 0 auto;

#content规则的

..

它应该是#navwrapper规则，它也不应该是100%而是996px ...以便整个网站都居中......

Answer 2

如果要点击它并将它带到某个URL，请将标题图像粘贴在Href标记内。

为什么我的内容总是在div中向左移动？

2 个答案: