Question

我需要完成javascript加载html页面到div。我想将page1，page2等加载到div id =＆＃34; content＆＃34;中。如果有人帮助我，我会感激不尽。感谢

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集合分配给变量，以节省您重复选择的时间。这种方式只在DOM加载时搜索nav ul li a一次。

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是一个更简单的版本。用那个。：）

将html加载到div，menu，switch

2 个答案: