精华内容
下载资源
问答
  • 浏览器Tab页切换事件

    千次阅读 2019-05-22 12:11:04
    浏览器Tab页切换事件 /*** * 浏览器Tab页切换事件 */ document.addEventListener('visibilitychange',function(){ if(document.visibilityState=='visible') { //状态判断:显示(切换到当前页面) // 切换到...

    浏览器Tab页切换事件

    /***
     * 浏览器Tab页切换事件
     */
    document.addEventListener('visibilitychange',function(){
        if(document.visibilityState=='visible') { //状态判断:显示(切换到当前页面)
            // 切换到页面执行事件
            var normal_title=document.title;
            alert(normal_title);
        }else if(document.visibilityState=='hidden'){//状态判断:隐藏(离开当前页面)
             // 离开页面执行事件
            var normal_title=document.title;
            alert(normal_title);
        }
    });
    展开全文
  • Tab页切换样式特效

    千次阅读 2017-09-07 17:49:07
    Tab页切换样式特效

    简单而易懂的常见tab切换效果,不知道能帮到有需要的同行,如写的不好勿喷,还请多多支持。

    效果图部分

    这里写图片描述

    CSS部分

    content {
                    width: 600px;  
                    height: 200px;  
                }
                #tab_bar {  
                    width: 600px;
                    height: 20px;
                    float: left;
                    border-bottom: 2px solid #E9EEED; 
                }
                #tab_bar ul {  
                    padding: 0px;  
                    margin: 0px;  
                    height: 20px;  
                    text-align: center;  
                }  
                #tab_bar li {  
                    list-style-type: none;  
                    float: left;  
                    width: 133.3px;  
                    height: 20px; 
                    cursor: pointer;
                    color: #999999;
                }  
                .tab_css {  
                    width: 599px;  
                    height: 200px;   
                    display: none;  
                    float: left;  
                }

    HTML部分

    <div id="content">  
                <div id="tab_bar">  
                    <ul>  
                        <li id="tab1" onclick="myclick(1)" style="border-bottom: 3px solid #1DD1BC;color: #1DD1BC;">  
                            tab1  
                        </li>  
                        <li id="tab2" onclick="myclick(2)">  
                            tab2  
                        </li>  
                        <li id="tab3" onclick="myclick(3)">  
                            tab3  
                        </li>  
                    </ul>  
                </div>  
                <div class="tab_css" id="tab1_content" style="display: block">  
                    <div>页面一</div>  
                </div>  
                <div class="tab_css" id="tab2_content">  
                    <div>页面二</div>  
                </div>  
                <div class="tab_css" id="tab3_content">  
                    <div>页面三</div>  
                </div>  
            </div>

    JS部分

    var myclick = function(v) {  
                    var llis = document.getElementsByTagName("li");  
                    for(var i = 0; i < llis.length; i++) {  
                        var lli = llis[i];
                        if(lli == document.getElementById("tab" + v)) {
                            lli.style.borderBottom = "3px solid #1DD1BC";
                            lli.style.color = "#1DD1BC";
                        } else {
                            lli.style.borderBottom = "0px solid #DFDFDF";
                            lli.style.color = "#999999";
                        }
                    }  
                    var divs = document.getElementsByClassName("tab_css");  
                    for(var i = 0; i < divs.length; i++) {  
                        var divv = divs[i];  
                        if(divv == document.getElementById("tab" + v + "_content")) {  
                            divv.style.display = "block";  
                        } else {  
                            divv.style.display = "none";  
                        }  
                    }  
                }
    展开全文
  • Tab页切换时页面自动刷新效果

    万次阅读 2017-12-04 11:15:03
    Tab页切换时页面自动刷新效果

    Tab页切换时页面自动刷新效果

    由于工作中奇葩的需求和页面设计,如下:

    tab页效果

    效果要求:tab页切换时要刷新一次页面,但问题是整个父页面加载时,全部iframe页面也会同时加载并缓存在浏览器,因此有了以下做法:每个tab实际对应的是一个iframe页面

    <%@ page contentType="text/html;charset=UTF-8" %>
    <%@ include file="/webpage/include/taglib.jsp"%>
    
    <html>
    <head>
        <title>预算管理</title>
        <meta name="decorator" content="default"/>
        <script type="text/javascript">
            $(document).ready(function() {
            //tab页面切换 页面刷新效果
                $('ul.nav-tabs>li>a').on('click',function() {
                    var $this = $(this);
                    var divId = $this.attr("href");
                    var srcVal = $(divId).children("iframe").attr("src");
                    $(divId).children("iframe").attr("src",srcVal);
                });
            });
        </script>
    </head>
    <body class="gray-bg">
    <!-- <div class="wrapper wrapper-content"> -->
        <div class="ibox">
        <div class="ibox-content">
    
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" id="actve1">财务科目设置</a></li>
                    <li class=""><a data-toggle="tab" href="#tab-2" id="actve2">本企业财务科目</a></li>
                    <li class=""><a data-toggle="tab" href="#tab-3" id="actve3">预算编制</a></li>
                    <li class=""><a data-toggle="tab" href="#tab-4" id="actve4">审批</a></li>
                    <li class=""><a data-toggle="tab" href="#tab-5" id="actve5">预算执行统计</a></li>
                </ul>
    
                <div class="tab-content">
    
                    <!-- 财务科目设置 -->
                    <div id="tab-1" class="tab-pane active">
                        <iframe id="allSubjectIframe" name="allSubjectIframe" frameborder="0" scrolling="no" width="100%" src="${ctx}/budget/financeAllSubject"></iframe>
                    </div>
                    <script type="text/javascript">
                        //计算iframe框架页面 height width
                        function allSubjectIframe(){
                            var iframe = document.getElementById("allSubjectIframe");
                            try{
                            var bHeight = iframe.contentWindow.document.body.scrollHeight;
                            var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                            var height = Math.max(bHeight, dHeight);
                                iframe.height = height;
                            }catch (ex){}
                        }
                        window.setInterval("allSubjectIframe()", 200);
                    </script>
    
                    <!-- 本企业财务科目-->
                    <div id="tab-2" class="tab-pane">
                        <iframe id="subjectIframe" name="subjectIframe" frameborder="0" scrolling="no" width="100%" src="${ctx}/budget/financeSubject"></iframe>
                    </div>
                    <script type="text/javascript">
                        function subjectIframe(){
                        var iframe = document.getElementById("subjectIframe");
                        try{
                        var bHeight = iframe.contentWindow.document.body.scrollHeight;
                        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                        var height = Math.max(bHeight, dHeight);
                            iframe.height = height;
                        }catch (ex){}
                        }
                        window.setInterval("subjectIframe()", 200);
                    </script>
    
                    <!-- 预算编制-->
                    <div id="tab-3" class="tab-pane">
                        <iframe id="planIframe" name="planIframe" frameborder="0" scrolling="no" width="100%" src="${ctx}/budget/financeBudgetPlan"></iframe>
                    </div>
                    <script type="text/javascript">
                        function planIframe(){
                        var iframe = document.getElementById("planIframe");
                        try{
                        var bHeight = iframe.contentWindow.document.body.scrollHeight;
                        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                        var height = Math.max(bHeight, dHeight);
                            iframe.height = height;
                        }catch (ex){}
                        }
                        window.setInterval("planIframe()", 200);
                    </script>
    
                    <!-- 审批-->
                    <div id="tab-4" class="tab-pane">
                        <iframe id="approvalIframe" name="approvalIframe" frameborder="0" scrolling="no" width="100%" src="${ctx}/budget/financeBudgetApproval"></iframe>
                    </div>
                    <script type="text/javascript">
                        function approvalIframe(){
                        var iframe = document.getElementById("approvalIframe");
                        try{
                        var bHeight = iframe.contentWindow.document.body.scrollHeight;
                        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                        var height = Math.max(bHeight, dHeight);
                            iframe.height = height;
                        }catch (ex){}
                        }
                        window.setInterval("approvalIframe()", 200);
                    </script>
    
                    <!-- 预算执行统计-->
                    <div id="tab-5" class="tab-pane">
                        <iframe id="budgetSummaryIframe" name="budgetSummaryIframe" frameborder="0" scrolling="auto" width="100%" src="${ctx}/budget/summary/financeBudgetSummary/list"></iframe>
                    </div>
                    <script type="text/javascript">
                        function budgetSummaryIframe(){
                        var iframe = document.getElementById("budgetSummaryIframe");
                        try{
                        var bHeight = iframe.contentWindow.document.body.scrollHeight;
                        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                        var height = Math.max(bHeight, dHeight);
                            iframe.height = height;
                        }catch (ex){}
                        }
                        window.setInterval("budgetSummaryIframe()", 200);
                    </script>
    
    
                </div>
    
            </div>
    
        </div>
        </div>
    <!-- </div> -->
    </body>
    </html>
    展开全文
  • eclipse自定义设置tab页切换快捷键

    万次阅读 2016-02-11 19:12:21
    eclipse自定义设置tab页切换快捷键

    1. 点击window菜单->preferences子菜单->general->keys,进入快捷键管理界面

    2. 在search栏 输入tab 如图修改Next tab(下一个tab页),Previous tab的Binding值。方法就是将光标移到Binding输入框,按下要设置为快捷键的键盘按键

    如果在冲突栏Conflicts出现快捷键已经使用的情况,只能将原有的那个删除掉。删除的方法仍是search到之后,将Binding清空。

    如上图设置后,就可以使用Ctrl+Tab 查看前一Tab页  Ctrl+Q查看后一Tab页,而无需鼠标操作

    展开全文
  • JS趣事:监听浏览器tab页切换

    千次阅读 2019-10-22 12:17:16
    那就是当我们切换浏览器的tab页的时候,可以对此行为进行监听,然后做一些自己想做的事情,比如改一改页面title了,或者别的一些操作。 JS监听浏览器tab页切换 浏览器标签被隐藏或显示的时候会触发 ...
  • 使用Bootstrap tab页切换的使用

    万次阅读 2016-08-24 10:52:27
    tab页切换 1.参考网站:http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html 2..fade增加淡入淡出效果;添加 .fade 到每个 .tab-pane 后面; 3.第一个标签必须添加 .in 类,以便淡入显示初始内容...
  • js实现tab页切换选项卡代码特效

    千次阅读 2014-12-02 10:24:07
    js实现tab页切换选项卡代码特效 源代码下载地址:http://www.zuidaima.com/share/1550463557864448.htm
  • ie浏览器里 tab页切换时垂直滚动条会回到最顶上的位置,怎么破,其他浏览器的滚动条都会在当前位置,菜菜菜鸟,求指点
  • 在使用tab页切换显示多个echart图的时候,第一张图之后的图会显示不完整。 在setOption操作后,使用resize方法可以使图正常显示。不过需要加上延时,等待渲染完成。 getInfoChart.setOption(option,true); ...
  • radio 实现tab页面切换

    2017-10-10 13:10:34
    如果我定义了两个tab: <div class="tab-pane active" id="tab1">…… <div class="tab-pane active" id="tab2">…… 然后定义了两个radio1,radio2,如何根据选中不同的radio显示不同的tab啊?求大神指教
  • CSS实现tab页切换效果

    2020-11-26 14:27:48
    tab切换在前端页面中是非常常见的一种效果。本人通过搜集资料大致实现有有下面三种写法。 利用:hover选择器 缺点:只有鼠标在元素上面的时候才有效果,无法实现选中和默认显示某一个的效果 利用a标签的...
  • bootStrap实现tab页切换

    万次阅读 2015-09-28 16:49:17
    bootStrap可以简单方便的实现tab页面的切换 用法 通过data属性 可以无需写任何JavaScript来激活标签式或圆角式的导航, 只需在元素上简单的指定 data-toggle=”tab” 或 data-toggle=”pill”. 在标签 ul 添加 nav...
  • html实现tab页面切换

    万次阅读 2016-07-28 14:30:50
    点击左边的tab可以切换右边frame页面 实现这个的话,首先得有一个大的html文件作为容器承载左边的菜单栏和右边的显示栏,然后左边的菜单栏也是一个html文件,右边有三种显示样式,就得五个html文件,为了区别我们...
  • HTML+CSS实现鼠标滑过tab页切换

    千次阅读 2020-09-04 15:26:58
    实现效果:当鼠标滑过tab标签时,实现对应标签的内容切换 <!DOCTYPE html> <html> <head> <title>demo</title> <style> div{ psoition: relative; width: 1550px; ...
  • CSS实现Tab页切换

    千次阅读 2018-01-29 17:04:26
    1.hover 移入其父元素.navI时,触发鼠标的hover态,给父元素添加样式为position:relative;z-index:1;。从而提升了层级z-index。在其子元素导航内容的层级比拼中,“子凭父贵”,父元素层级高的,其导航内容在重叠...
  • 首先,带大家来看看实现的效果图,点击底部三个tab按钮来实现页面的切换 具体实现代码如下: AppDelegate.m #import "AppDelegate.h" #import "RedViewController.h" #import "GreenViewController.h" #...
  • react-router 实现简单的tab页面切换

    千次阅读 2020-07-27 12:52:04
    标题:通过路由来实现简单的tab切换 import React from 'react'; import logo from './logo.svg'; import './App.css'; import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 197,472
精华内容 78,988
关键字:

tab页切换