将 html 加载到 div、菜单、开关中

Question

我需要完成 javascript 以将 html 页面加载到 div 中。我想将 page1、page2 等加载到 div id="content" 中。如果有人帮助我，我将不胜感激。谢谢

Here is jsfiddle of this code

HTML

<div id="menu">
<nav>
<ul>
<li ><a  class="active" href="1.html" ><b>Page1</b></a></li>
<li ><a  href="2.html" ><b>Page2</b></a>

</li>                                        
<li ><a   href="3.html"><b>Page3</b></a>

</li>
<li ><a  href="4.html"><b>Page4</b></a></li>
<li ><a  href="5.html"><b>Page5</b></a></li>
</ul>
</nav>   
</div>

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

CSS

nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: rgb(1, 1, 1);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
font-family: Times New Roman;
font-size: 70%;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li {
float: left;
font-family: Arial;
font-size: 1;
}
nav ul li a:hover, nav ul li a.active, nav ul li a.visited {
background: rgb(177, 2, 10);
}
nav ul li:hover a {
color: rgb(255, 255, 255);
}
nav ul li a {
display: block;
padding: 5px 45px;
color: rgb(255, 255, 255);
text-decoration: none;
position: relative;
}
#menu {
position: relative;
width: 780px;
height: 35px;
left: 50%;
margin-left: -388px;
overflow: hidden;
top: -20px;
}

#content {
position:       relative;
float: center;
width: 770px;
height: 670px;

clear:both;
margin:     0 auto;
border-radius: 7px;
overflow: hidden ;
top: 0px;
border: 3px solid black;
}

JAVASCRIPT

$(document).ready(function(){
$('nav ul li a').click(function(){
   $('nav ul li a').removeClass('active');
   $(this).addClass('active');
});    



});

Answer 1

假设您的href 引用了包含您要显示的内容的文件，您可以使用.load()。您可以使用.prop() 获取href 属性。

当您的锚点被点击时，阻止默认操作（重定向到新页面）。

您可能还想在页面加载时为.active 导航按钮触发此功能。为此，我后来添加了一个过滤器和一个点击触发器。

$(document).ready(function () {
    var $navAnchors = $('nav ul li a');
    $navAnchors.click(function (e) {
        var $this = $(this);
        e.preventDefault();
        $navAnchors.removeClass('active');
        $this.addClass('active');
        $('#content').load($this.prop('href'));
    }).filter('.active').click();
});

请注意，我已将匹配的 jQuery 集合分配给一个变量，以节省您重复选择的时间。这样nav ul li a 只会在 DOM 加载时搜索一次。

Answer 2

使用$.get。

$(document).ready(function(){
    $('nav ul li a').click(function(e){          // when a nav link ('a' tag) is clicked...
        $('nav ul li a').removeClass('active');  // remove the css class "active" from any nav links.
        $(this).addClass('active');              // add the css class "active" to the one we clicked

        e.preventDefault(); // <-- important!    // prevent the page from navigating away
        var page = this.href;                    // get the url the link would normally go to
        $.get( page, function( data ) {          // in the background, get the content of the page for the link we have clicked
          $( "#content" ).html( data );          // load the content we have into the element with id "content"
        });
    });       
});

如果您说第一次加载该页面时是空的，那是正常的。如果您希望它加载某些内容，则需要在页面加载时手动触发 click 事件。类似于：

$('nav ul li a.active').click();                  // Get the nav link which has class "active", and fire the click() event.

... 应该可以解决问题。

注意 -- fiddle 不起作用，因为它不能很好地支持 AJAX。
第二个注意事项 - George's answer 是一个更简单的版本。用那个。 :)