点击不同按钮,加载不同的页面(不使用iframe的情况下)

<button id="button1">Load Html1</button>
<button id="button2">Load Html2</button>
<div></div>
<script type="text/javascript">
$("#button1").click(function () { $("div").load("content1.jsp"); }); $("#button2").click(function () { $("div").load("content2.jsp"); }); </script>

第二种方法(建议第二种方法):

使用angularjs的路由机制,配合ng-view标签使用,具体查看下方链接。

var app = angular.module(‘ngRouteExample‘, [‘ngRoute‘])
    .controller(‘MainController‘, function($scope) {
    })
    .config(function($routeProvider, $locationProvider) {
      $routeProvider
          .when(‘/users‘, {
              templateUrl: ‘user-list.html‘,
              controller: ‘UserListCtrl‘
          })
          .when(‘/users/:username‘, {
              templateUrl: ‘user.html‘,
              controller: ‘UserCtrl‘
          });

        // configure html5
        $locationProvider.html5Mode(true);
    });
<div ng-controller="MainController">
  Choose:
  <a href="users">user list</a> |
  <a href="users/alice">user: alice</a>

  <div ng-view></div>
</div>

则div会展示子页面。

http://harttle.com/2015/06/10/angular-route.html

或者看这个:http://blog.gejiawen.com/2015/12/15/routes-solution-on-angular-ng-route/

时间: 2025-01-02 10:31:56

点击不同按钮,加载不同的页面(不使用iframe的情况下)的相关文章

仿腾讯新闻,点击屏幕重新加载的实现,直接贴代码

<pre class="java" name="code">package com.example.clicktoreload; import com.example.clicktoreload.ClickScreenToReload.Reload; import android.os.Bundle; import android.os.Handler; import android.app.Activity; import android.view.M

按钮加载事件

按钮加载事件 <div class="container"> <button class="btn btn-danger" data-loading-text="正在加载....">加载</button></div><script> var $btn=$(".btn"); $btn.click(function(){ var self=this ; //把这里的thi

WebView中实现延迟加载,图片点击时才加载。

1 String newHtml = html + 2 "<script type=\"text/javascript\">" + 3 "(function (){"+ 4 "var imageList = document.getElementsByTagName(\"img\");"+ 5 "for(var i=0; i<imageList.length; i++){&quo

EasyUI treegrid 实现点击父节点加载子节点

今天在项目中遇到问题,要实现 EasyUI   treegrid 实现点击父节点加载子节点 第一反应是去百度一下,谷歌一下,发现网上的回答不是懒加载就是在onBeforeExpand调用append方法 我决定使用第二种方法,定义treegrid的onBeforeExpand方法,在里面调用appen方法. 然而当我兴冲冲的运行的时候,出问题了, Firefox出现too much recursion异常提示 在网上看了一下这个问题的出现原因,大家都说是,非法使用了js关键字,可是我看了几遍代码

bootstrap按钮加载状态改变

bootstrap里面有个激活按钮的时候,按钮变成不可用的: 按照官网里面的方法介绍是在button按钮加个data-loading-text="Loading..."属性,然后js总体代码是这样: <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplet

嵌入式表单字段中的内容可能被服务器更改以删除不安全的内容。是否要重新加载您的页面以查看保存结果?

嵌入式表单字段中的内容可能被服务器更改以删除不安全的内容.是否要重新加载您的页面以查看保存结果? 最近有朋友问到,当他在SharePoint首页上进行编辑时,插入一段代码.完工后保存就遇到了这个问题. 无论选"是"或"否",保存完毕后在设计视图中都看不到效果,查看代码视图,对应的代码也被删除掉了. 这确实是很恼人,好不容易写了那么多东西,结果最后被SPD自己搞没了,如果之前备份了还好,否则,大半天的成果就不翼而飞了. 首先,关于这个问题的定性要清楚.它不是一个错误:

百度地图多点路径加载以及调整页面js

1 $(document).ready(function () { 2 /*用正则表达式获取url传递的地址参数,split后获得地址数组*/ 3 bmap = new BMap.Map('mapcontainer'); 4 var point = new BMap.Point(116.404, 39.915);//地图中心点 5 bmap.centerAndZoom(point, 15);//调整缩放以及设立中心点 6 bmap.enableScrollWheelZoom(); 7 var l

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr

转:iframe加载的子页面里面获取父级元素窗口以及元素的高度

iframe里的js要操作父级窗口的dom,必须搞懂几个对象: parent是父窗口(如果窗口是顶级窗口,那么parent==self==top) top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe) self是当前窗口(等价window) 父级页面:index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>父窗口<

ViewPager动态加载、删除页面

很多人在网上说ViewPager的PagerAdapter.notifyDataSetChanged()无效.刚开始我也这样认为,甚至被误导以为是真理. 后来,找了一下,在PagerAdatpar重写getItemPosition(),return POSITION_NONE即可每次刷新加载图面.这是关键点. 这时,如果只是修改"DataSet",如List等这类的,然后再notifyDataSetChanged(),会发现出现界面重叠.解决办法是重写destroyItem(),把Vi