Question

我需要你的帮助。我有2个div：侧边栏和内容。在SIDEBAR中我有一些链接（a b c），当我按下“a”链接时，我想在CONTENT div中打开pageA.html，当我按下“b”链接 - pageB.html等等。我尝试过iframe，但我知道这不是一个好主意，有什么建议吗？提前致谢

Answer 1

使用jQuery的load（）函数。它只是在没有Angular或框架集的情况下完成你正在寻找的东西。

http://api.jquery.com/load/

<强> HTML

<h1>My Website</h1>
<div class="nav">
    <ul>
        <li><a id="nav_a" href="#">Page A</a></li>
        <li><a id="nav_b" href="#">Page B</a></li>
    </ul>
</div>
<div id="content">Here's some default content (maybe Page A?)</div>

<强>的Javascript

$(function(){
    $("#nav_a").on("click", function(){
        $("#content").load("pageA.html");  
    });
    $("#nav_b").on("click", function(){
        $("#content").load("pageB.html");  
    });    
});

请注意，您无法加载域外的网页，但听起来并不像您尝试这样做。

Answer 2

有很多方法可以解决这个问题。我建议使用AngularJS。一开始可能看起来令人生畏，但它值得，并且可以很容易地达到你想要的效果。

<!-- include angular -->
<script src="angular.js"></script>

<div ng-app="app" ng-controller="main">

  <!-- sidebar -->
  <a ng-click="template = 'page1.html'">Page One</a>
  <a ng-click="template = 'page2.html'">Page Two</a>

  <!-- content -->
  <div ng-include="template"></div>

</div>

<script>
  // define angular app
  angular.module('app', []);

  // define controller
  function main ($scope) {

    // instantiate template to show page one by default  
    $scope.template = 'page1.html';
  }

  // register controller
  angular.module('app').controller('main', main);
</script>

Answer 3

如果pageA.html中的内容可以在主HTML页面上生效，则可以在单击相关链接时使用JavaScript显示/隐藏div。

如果内容需要存在于各个HTML页面上，那么使用JS在iframe上设置src可能就好了。

Answer 4

我认为使用Ajax的简单jQuery最简单。我在手机上，但只要您使用jQuery，这只是几行代码：

$获得（ “URL-的-content.htm” “” 功能（数据）{ $（ “＃内容”）HTML（数据）; ）;

很抱歉，我没有为动态检索html内容提供更多逻辑，但我希望这有帮助，因为我已经使用这种方法很多已经加载jQuery的网站，因为这样很容易以外部内容方式提取。

在另一个div HTML Javascript中打开另一个页面/内容

4 个答案: