精华内容
下载资源
问答
  • 这里我们通过一个实例来阐述具体的做法,首先我们在一个页面两个要处理的DIV页面,第一个页面的div中id=”basic”,第二个页面的div中id=”high”。(我们要实现的功能是,打击 基础入门,与 高级技能 可以切换...

    这里写图片描述这里写图片描述


    这里我们通过一个实例来阐述具体的做法,首先我们在一个页面有两个要处理的DIV页面,第一个页面的div中id=”basic”,第二个页面的div中id=”high”。(我们要实现的功能是,点击基础入门,与 高级技能 可以切换对应的页面,基础入门 下滑 就是 高级技能页面,高级技能页面上滑就是 基础入门页面)


    HTML

         <div class="nav"></div>
            <div id="basic" class="basicintro">
              ..... // 页面一
            </div>
    
            <div id="high" class="highskill">
              .....// 页面二
         </div>

    接下来我们引入zepto-cmd.js(JQuery.js的精简版) 或者JQuery.js ,上面是Sea.js引入的写法,常规写法

        <script type="text/javascript" src="jquery-1.12.2.min.js"></script>

    接下来就在页面加载后,或者文档元素加载后执行下面的匿名函数。

    JS

    var $ =window._$=require("/lib_cmd/zepto-cmd")
        //页面滚动的时候
         $(function(){
                /* scrollTo(0,0);*/
                 window.onscroll=function(){      //页面滚动的时候
                     var elm1=$("#basic")[0];
                     var elm2=$("#high")[0];
                     var scrolltop = Math.ceil(document.documentElement.scrollTop ||document.body.scrollTop);
                     if (scrolltop >= 0 && scrolltop < elm2.offsetTop-$(".nav").height()) {
                         $(".nav ul li a").removeClass("on"); //内部去除锚,和底部CSS样式处理
                         $(".basic a").addClass("on");   //内部添加锚,和底部CSS样式处理
                         //location.hash="#basic";
                     }
                     if (scrolltop >= elm2.offsetTop-$(".nav").height()) {
                         $(".nav ul li a").removeClass("on");
                         $(".high a").addClass("on");
                        // location.hash="#high";
                     }
                 }
            })

    我们通过("#basic")[0]  和(“#high”)[0] 拿到对应的DIV对象,通过

        Math.ceil(document.documentElement.scrollTop 

    拿到滚动条的高度,如果

        scrolltop >= 0 && scrolltop < elm2.offsetTop-$(".nav").height(),

    也就是说但滚动条的高度大于0,并且其高度小于$(“#high”)[0]的高度减去 页面最上面

        <div class="nav"></div> 

    的高度时,第一个页面添加对应的样式,第二个页面去除对应的样式。同理当,并且其高度大于$(“#high”)[0]的高度减去 页面最上面

        <div class="nav"></div> 

    的高度时,第一个页面去除对应的样式,第二个页面加上对应的样式。

    这样看似逻辑正确?其实在手机上回出现一个小问题,就是页面在刷新的时候,页面跳不到对应的位置!因此我们做了这样的操作。

    var $ =window._$=require("/lib_cmd/zepto-cmd")
            //页面滚动的时候
             $(function(){
                    /* scrollTo(0,0);*/
                     window.onscroll=function(){      //页面滚动的时候
                         var elm1=$("#basic")[0];
                         var elm2=$("#high")[0];
                         var scrolltop = Math.ceil(document.documentElement.scrollTop ||document.body.scrollTop);
                         if (scrolltop >= 0 && scrolltop < elm2.offsetTop-$(".nav").height()) {
                             $(".nav ul li a").removeClass("on");
                             $(".basic a").addClass("on");
                             //location.hash="#basic";
                         }
                         if (scrolltop >= elm2.offsetTop-$(".nav").height()) {
                             $(".nav ul li a").removeClass("on");//内部去除锚,和底部CSS样式处理
                             $(".high a").addClass("on"); //内部添加锚,和底部CSS样式处理
                            // location.hash="#high";
                         }
                     }
                     window.onload=function (){      //页面加载的时候
                         if (window.location.hash=="#basic") {
                             window.location.hash = "";
                             window.location.hash="basic"
                         }else if(window.location.hash=="#high"){
                             window.location.hash = "";
                             window.location.hash="high"
                         }else{
                             window.location.hash = "";
                             window.location.hash="#basic"
                         }
    
                     }
                })

    我们在页面加载前,对页面当前的锚,做判断,具体做法如上所示。这样就有效的避免页面了在加载,刷新时的问题。

    展开全文
  • html中如何链接到另一个页面

    千次阅读 2021-06-10 16:00:17
    frameborder嵌套页面边框,leftmargin左边距,topmargin上边距 扩展资料: 嵌入页面的几种方法: 一、应用框架技术 在页面中嵌入外部页面的html中怎么从一个页面跳转到另一个页面一个名字为网页跳转的...

    如何将一个html页面中嵌入另一个html页面

    将一个html页面中嵌入另一个html页面需要使用到iframe标签。 iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌套页面边框,leftmargin左边距,topmargin上边距 扩展资料: 嵌入页面的几种方法: 一、应用框架技术 在页面中嵌入外部页面的

    html中怎么从一个页面跳转到另一个页面

    弄一个名字为网页跳转的简单静态网页,网页内有一张图片,图片要置于网如果您在此页面内跳转,则可以使用代码跳转到指定位置。

    转到指定位置是指向id weizhi的页面部分的超链接。 位置是需要转移的部分。

    HTML网页怎样链接到另一个HTML网页?

    需要借助jquery引入,操作方法是首先打开html编辑器hbuilder软件,新建一个html文件并在里面写一个h2标签和div标签,div中设置class属性为footer。

    然后在编辑器的项目管理器列表中最顶层的项目文件右键,点击新建选择新建一个html文件。

    HTML中怎么写能可以 点一个按钮然后跳转另一个页面

    可以用html中的a标签(xxx.html就是要跳转的链接): 跳转链接可以用js进行跳转: 点击跳转以上两种方式达到的效果是一样的.

    HTML中怎么点击超链接让新页面在另一个窗口打开?

    html中怎么从一个页面跳转到另一个页面?

    JS跳转大概有以下几种方式: 第一种:跳转到b.htmlwindow.location.href=b.html。 第二种:返回上一页面window.history.back(-1)。 第三种:window.navigateb.html。 第四种:self.location=b.html。 第五种:top.location=b.html。

    HTML做的网页 如何使当前页面跳转到另一页面锚点处HTML的网页,在当前页面设置了超链接,想跳转到另一个页面设置的锚点处比如现在有t1.html和t2.html两个页面,t1页面中需要设置超链接跳转到t2页面中的锚点a1位置,则需要按如下步骤进行设置:

    t1页面中设置超链接href属性。 t1页面 html,body{margin:0;padding:0;background-color:#ccc;} .anchor{display:block;

    请问一个html中的超链接到另一html中的某一部分,使用锚记。 如A.html中需要链接到B.html中的某部分, 首先在B.html的某部分设定锚点,比如取名为“B1” 然后在A.html中使用: 转到B.html中的B1

    展开全文
  • 今天,给一个客户页面处理时,他们要求一个留言页面在提交留言时,既要让数据进入后台管理,同时还要把数据进入另一个系统去处理,这就要求一个表单同时提交到两个不同的页面,具体怎么实现呢?一般做法可以先提交给...

    今天,给一个客户在做页面处理时,他们要求一个留言页面在提交留言时,既要让数据进入后台管理,同时还要把数据进入另一个系统去处理,这就要求一个表单同时提交到两个不同的页面,具体怎么实现呢?一般做法可以先提交给一个页面,执行了再把值传到另一个页面处理,根据这个情况,显得有点麻烦,我的方法是用javascript脚本,可以一个FORM表单直接提交给两个不同的页面同时处理,不多说了,大家看一下我的代码:

    第一种方法: 
    <script language="Javascript">
    function  hbsubmit(){
    document.form1.target="_blank";
    document.form1.action="a.php";
    document.form1.submit();
    document.form1.target="_blank";
    document.form1.action="b.php";
    document.form1.submit();
    }
    </script>
    <form  name="form1" method="post" action="">
    <input type="text"  name="textfield">
    <input type="button" name="Submit" value="提交"  onClick="hbsubmit()">
    </form>
    因为提交表单后是同时弹出两个新页面执行的,如果你只需要显示一个页面处理情况,而另一个隐藏处理的话把需要隐藏的那个页面属性document.form1.target="_blank";去掉即可,如隐藏2.asp页面的弹出处理:

    请看第二种方法:
    <script language="javascript">
    function  F_submit(){
    document.form1.target="_blank";
    document.form1.action="a.php";
    document.form1.submit();
    document.form1.action="b.php";
    document.form1.submit();
    }
    </script>

    上面的javascript和我们的表单结合,也不难吧,javascript在网页设计中的应用很重要的 

    展开全文
  • Vue中两个页面一个页面中想要调取另一个页面的方法) 问题描述 遇到两个组件,但是一个组件(A)添加之后要把最新的数据更新(B)另一个组件 ,所以再(B)页面调取另一个页面(A)的方法 实现方法 首先你...

    Vue中两个页面,一个页面中想要调取另一个页面的方法)

    问题描述

    遇到两个组件,但是一个组件(A)添加之后要把最新的数据更新(B)另一个组件 ,所以再(B)页面调取另一个页面(A)的方法

    实现方法

    1. 首先在你的父组件里面找子组件 <component :is=“cut” @InitTable=“InitTable”>把方法名传给这个组件(这个方法名就是你要调取的)

    2.     <div>
        <!-- <keep-alive> -->
        <component :is="cut" @InitTable="InitTable" @AddDialog="AddDialog"></component>
        <!-- </keep-alive> -->
      </div>
      
    3. `
      上图为在父组件里面使用的组件(这种方式是动态加载的组件,因为每个组件模拟tab栏那种效果),把父组件方法名传到你要用的组件

      if(res.status==200){
              this.$message.success('添加成功')
              // console.log(this.Addtable);
              // Bus.$emit('AddTableData',this.Addtable)
               this.$emit('InitTable')
               this.$emit('AddDialog')
            }
    

    然后再子组件里面 this.$emit(‘InitTable’) 只调取这个方法名触发方法,所以只有一个参数 。

    展开全文
  • 1、当一个页面中只存在一个模态框时,大家可以使用菜鸟教程中的例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 模态框(Modal)插件</...
  • Jquery在两个HTML页面之间传递参数

    千次阅读 2015-06-20 21:59:29
    待跳转页面JS: function openreverspage() {  var row = $("#dg").datagrid('getSelected');  alert(row.plane_type);  if (row) {  window.location.href = "addorder.jsp?plane_type=" + escape
  • 主要实现点击链接进入视频介绍,设置定时,然后跳转到另一个页面 代码如下: &lt;script type="text/javascript"&gt; function jumpurl(){ location='...
  • H3C提供一个页面的控件,直接在页面通过JS脚本调用。需要给这个控件传递一个摄像机的编号,传递后,页面的控件便显示出该摄像机的视频。调用方便,但是问题来了,需要在一个独立的页面显示摄像机的视频,用户需要看...
  • 在一个页面同时引入两个百度地图

    千次阅读 2017-05-31 17:20:13
    同时加载两个百度地图
  • 个在网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可。这样便于维护,如果有很多网页,当通用内容需要修改时,只改一个文件就可以了,不...
  • 功能测试: 1、输入正确的用户名和密码,点击提交按钮,验证是否能正确登录 2、输入错误的用户名或者密码,验证登录会失败,... 3、登录测试后能否能跳转到正确的页面 ... ...1、布局是否合理,两个信息输入框和一个按...
  • //调用模式对话框,设置参数修改模式对话框的参数 parent.$.modalDialog({ id: "wzbdwin", title :'无照信息'+ "("+qymc+")"+"比对", width : 1000, height : 600, left:100, top:20, ...
  • 两个html页面间如何传递数据

    千次阅读 2019-12-27 22:39:59
    两个html页面间如何传递数据 最近自己再做一些web的开发项目,不同的html之间传递数据我总结了3种方式。 .通过表单简单的传输数据,利用js代码接收传递的数据,注意method属性要设为get。 <form id="form" ...
  • 一个简单的HTML页面

    万次阅读 2019-09-26 14:12:22
    一个火狐的首页,我设置了皮肤,背景是本地图片。 思路 一个表单,两个按钮,三个单选框。 六个div。图片是png矢量图。或者自己截的截图。 效果图 代码 <!DOCTYPE html> <html> <head&...
  • 把要传递的数据作为字符串拼接到要跳转的url后面,另一个页面直接读取本页面的url 这是封装好的两个函数,直接拿来调用就可以//把参数拼接到url后面 function grow(obj,url) { var s = ''; for(var k in obj){ s ...
  • 选择“自定义网页网页”,不要选择它推荐的选项,你选择它推荐的打开就是两个啦 也可以选择设置网页设置自己常用的网站就可以啦~ 欧克,问题解决了,重启就行了!!欢迎点赞关注!!???????????? ...
  • js两个页面之间传递参数

    千次阅读 2018-11-20 11:56:15
    今儿写js写了个页面跳转,要把参数从一个页面传递过去 我寻思网上一看正好有这个方法,还不用后台岂不是美哉 就比方说咱吧page1.jsp的俩参数传到page2.jsp里头 page1.jsp的代码我就直接放个js的了 &lt;...
  • 在页面上有一个弹框,想要弹框滚动,背景页面不动。 解决方法: .alert-box{ position: fixed; overflow-y: scroll; width: 100%; height: 100%; top: 0; left: 0; &::-webkit-scrollbar{ display:...
  • 1、需求  项目中h5页面内有文章资讯模块,文章详情页里面底部放了公司二维码,然后用户分享的时候,会带上分享...也就是只能识别其中一个二维码 3、分析 微信识别二维码的原理机制  这里采用的逻辑...
  • 两个HTML页面之间如何传值

    万次阅读 多人点赞 2018-11-08 17:58:31
    因最近尝试实现客户端与服务端分离,服务端只提供接口,客户端用html+js实现,分成两个独立的项目部署,因项目是个人项目,客户端展示不考虑使用像Angular、Vue、Native这种前端框架实现,于是全部使用静态页面实现...
  • 一个页面中有两个iframe

    千次阅读 2015-03-09 10:48:08
    点击左边iframe,内容显示右边的iframe 代码:   //初始化 function initItem(){ var params="?approSeq="++"&proSeq="+; window.frames["leftFrame"].location.href = "/monitor/showLeftMonthList....
  • 下面的html代码为例: <body> <article id="tablet"> <img src="tablet.png" alt="tablet"> <h1>Comprehensam</h1> <p>Mel homero l...
  • 两个页面传递参数实现的几种方式

    千次阅读 2018-04-24 12:34:40
    两个页面传递参数实现的几种方式1.使用window.name:a页面:b页面:2.使用h5中的localStorage:a页面:b页面: 3.使用url传递参数:a页面:b页面: 
  • 如何在一个页面用多个swiper插件

    万次阅读 多人点赞 2017-04-26 10:33:58
    编写移动web前端页面时,发现公司的原代码引用沉重杂乱,因此才找到了swiper这款强大的移动web前端js插件。下面就是学习及使用过程中的碰到的问题和解决方法。。 html代码: <div class="swipe
  • 问:请问jsp页面用框架网页页面分成左右两个,怎么实现左侧点击,链接一个页面到右边的页面jsp页面用框架网页()把页面分成左右两个页面,怎么实现左侧点击,链接一个页面到右边的页面?另外,为什么我jsp...
  • 这时我们返回时就不能刷新,所以最好是这个点餐和确认订单是在一个页面的。如果使用mui的单页面,可能会是页面太多了不方便操作。再加上接口什么的,就内容过多。 我们可以考虑利用框架iframe,第二个页面通过...
  • 2. 应用收到这种用户请求后,将用户重定向到微信提供的一个授权页面:  或  3. 用户通过微信扫码(PC端授权,上边左图)或者点击确认按钮(移动端授权,上边右图)告知微信,授权应用访问自己的微信账号信息;  4...
  • 两个静态html页面传值方法的总结

    万次阅读 2017-10-30 15:31:03
    服务端只提供接口,客户端用html+js实现,分成两个独立的项目部署,因项目是个人项目,客户端展示不考虑使用像Angular、Vue、Native这种前端框架实现,于是全部使用静态页面实现,请求数据用ajax,开发的过程中,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 517,937
精华内容 207,174
关键字:

怎么设置两个网页在一个页面