Question

所以.. 我一直试图动态加载内容但是当我点击菜单加载器时只显示。我似乎无法解决这个问题，你能不能看看代码并告诉我是否错过了什么或做错了什么？

这是我的HTML

<body>

<div id="wrapper">

<div id="top">
    <div id="logo">
    <img src="images/logo.png"/>
    </div>


<div id='cssmenu'>
<ul id="nav">
   <li class='has-sub'><a href="storitve.html">Storitve</a>
      <ul>
         <li><a href="grafično-oblikovanje.html">Grafično oblikovanje</a></li>
         <li><a href="spletno-oblikovanje.html">Spletno oblikovanje</a></li>
         <li><a href="industrijsko-oblikovanje.html">Industrijsko oblikovanje</a></li>
      </ul>
   </li>
   <li><a href="reference.html">Reference</a></li>
   <li><a href="cenik.html">Cenik</a></li>
   <li class='last'><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
</div>

<div id="content">
</div>

<div id="footer">
<p>&copy;Copyright 2015</p>
</div>

</div>
</body>
</html>

..和js

$(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html #content';
        $('#content').load(toLoad)
    }                                           
});

$('#nav li a').click(function(){

    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
        $('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#content').show('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    return false;

});

});

和css

body        { width:100%; 
              height:100%;
              margin:0px;
              padding:0px;
              font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif; 
              text-align:center;
              background:#BFBFBF;
              padding-bottom:60px;
            }



#logo     {  float:left;
             position: fixed;
             margin-top: 20px;
             margin-left: 20px;
             margin-bottom:20px;
             z-index: 2000;
          }


#top     {  position:relative;
            top: 0px;
            left:0px;
            width:945px;
            height: 160px;
            background-color: white;

            z-index:auto;
            opacity: ;
         }

#cssmenu {  float:right;
            position:fixed; 
            margin-top:123px;
            margin-left:554px;
            font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
            font-size: 11px;
            line-height: 15px;
            text-transform: uppercase;
            text-align: left;
            z-index:3;

         }

#cssmenu > ul {   width: auto;
                  list-style-type: none;
                  padding: 0;
                  margin: 0;
              }

#centeredmenu ul ul {
    z-index: 1 !Important;
}




#wrapper    { width: 945px;
              margin:0px auto;
              background: #BBB;
              position:relative;
              border: ;
            }



#content    {  width:880px; 
               background-color:white; 
               border: px solid white;

               margin: 10px auto;
               padding: 0 30px;
            }



#footer  {  position:fixed;
            bottom:0;
            left:0;
            width:100%;
            height:40px;   /* Height of the footer */
            background:white;
         }



#load {
    display: none;
    position: absolute;
    right:460px;
    top: 380px;
    background: url(../images/ajax-loader.gif);
    width: 43px;
    height: 11px;
    text-indent: -9999em;
}

Answer 1

您正在从DOM中删除加载程序：

$('#load').remove();

然后你尝试在它不存在的情况下淡入它：

$('#load').fadeIn('normal');

将.remove()替换为.hide()来隐藏它，但不要将其从DOM中删除。

Answer 2

这是我的导航菜单，我想要做的是当我点击导航时，它会动态地将请求的页面加载到带有jQuery的内容div中。

<div id='cssmenu'>
    <ul id="nav">
       <li><a href="index">Domov</a></li>
       <li class='has-sub'><a href="storitve">Storitve</a>
          <ul>
             <li><a href="grafično-oblikovanje">Grafično oblikovanje</a></li>
             <li><a href="spletno-oblikovanje">Spletno oblikovanje</a></li>
             <li><a href="industrijsko-oblikovanje">Industrijsko oblikovanje</a></li>
          </ul>
       </li>
       <li><a href="reference">Reference</a></li>
       <li><a href="cenik">Cenik</a></li>
       <li class='last'><a href="kontakt">Kontakt</a></li>
    </ul>
    </div>
    </div>

<div id="content"></div>

我将JS代码更改为：

$(document).ready(function() {
    // initial
    $("#content").load("content/index.html");

    // handle menu click
    $("ul#nav li a").click(function() {
        var page = $(this).attr("href") ;
        $("#content").load("content/" + page + ".html");

        return false;


        }); 
    });

但它只在2个菜单按钮上工作。

使用jquery动态加载内容不起作用

2 个答案: