jQuery .load()搞砸了我的<a> tags</a>

时间:2013-03-16 23:23:54

标签: jquery css

好的,这是交易。我有一个网站,我动态加载所有内容。我基本上将其他页面的内容加载到主页面上的div中。如果我把它去除所有的功能和花里胡哨,我把它缩小到它是.load()函数。每当它执行它时,我的链接就会变得混乱,不合适,我找不到它。我试过搜索,但没有人似乎有我的问题,但如果我错过任何我道歉。这令我感到沮丧,我只是想知道它是什么。

Javascript

function openContent(x)
{
        var q= x+".php #info";
    $("#content").load(q,function() { $('#content').mCustomScrollbar({ scrollButtons:{ enable:false} }); });
    $("#container").animate({opacity:1.0,width:'890px'},3000);
    $('#content').animate({opacity:1.0,width:'890px'},3000);
    $('.close').animate({opacity:1.0,},12000);
}

PHP

<div id="background">
    <div id="logo"></div>
        <input type="button" class="web-development" onclick="openContent('development')"/>
        <input type="button" class="graphic-design" onclick="openContent('graphic-design')" />
        <input type="button" class="photography" onclick="openContent('photography')" />
        <input type="button" class="projects" onclick="openContent('projects')" />
        <input type="button" class="contact" onclick="openContent('contact')" />
        <input type="button" class="close" onclick="closeContent()" />
    <div id="container" ><div id="content"></div></div>
    <div id="footer">Copyright <?php echo date('Y'); ?> &copy;</div>
</div>

单击按钮时,会将相应的内容加载到内容div中。

CSS

#background
{
    background: url('../Images/background.png') no-repeat;
    margin-right:auto;
    margin-left:auto;
    height:800px;
    width:1280px;
}

#logo
{
    background: url('../Images/logo.png') no-repeat;
    width: 235px;
    height: 175px;
    z-index: 999;
    position:absolute;
    top: 10px;
    left: 535px;
}

/*container to affect the scroll */
#container
{
    background: url('../Images/content_bg.png');
    height:650px;
    width:1px;
    opacity:0.0;
    padding: 90px 40px 0px 40px;
    position:absolute;
    z-index:7;
    left:165px;
    top:70px;
}
/* deocarting content */
#content
{
    background: url('../Images/content_bg.png');
    opacity: 0.0;
    width:1px;
    height:650px;
    padding: 0px 0px 0px 0px;
    z-index:8;
    color:#f4cf00;
    /* for IE 5&6&7 opacity hack */
    filter: alpha(opacity=0);
    font-family:"Gabriola";
    font-size:20px;
    overflow:auto;

}

/* classes for the buttons on the main page */
.projects
{
    position:absolute;
    top:160px;
    left:425px;
    background: url('../Images/projects.png') no-repeat;
    width:130px ;
    height:640px;
    z-index: 2 ;
    border: 0px solid;
}

这就是CSS决定如何定义内容div和容器。就像我说的那样,如果我不使用加载功能并且只是手动淡化内容就可以了。使用负载和我的链接消失,我必须使用选项卡来找到它们

1 个答案:

答案 0 :(得分:0)

可能值得复制您的问题并查看响应值所说的内容?如果您将来能够发现错误并告诉用户,那就太好了。

$("#content").load(
    q,
    function(responseContent, responseStatus, responseObject) {
        console.log(responseContent);
        console.log(responseStatus);
        console.log(responseObject);
    }
);

希望有所帮助。