javascript - 将 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 属性.

防止单击 anchor 时的默认操作(重定向到新页面)。

您可能还想在页面加载时为 .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 加载时被搜索一次。