精华内容
下载资源
问答
  • 怎么把标签页添加到标签栏
    千次阅读
    2020-10-16 11:45:19

    添加图标:

    在这里插入图片描述

    在head标签中添加如下代码:

    <link rel="icon" href="./home.ico" type="image/x-icon">  //在标题栏的左侧显示图标 href:图标地址
    <link rel="shortcut icon" href="./home.ico" type="image/x-icon">  //在收藏夹里面显示图标 href:图标地址
    

    添加标题:

    在head标签中添加如下代码:

    <title>主页</title> 
    
    更多相关内容
  • 使用TabHost实现的导航有三种添加页面的方法,分别是直接在布局代码的tab里面添加;通过include标签添加;通过Java代码指定另一个Activity添加。下面是三种方法的示例:直接在布局代码的tab里面添加页面使用拖控件...

    使用TabHost实现的导航栏有三种添加页面的方法,分别是直接在布局代码的tab里面添加;通过include标签添加;通过Java代码指定另一个Activity添加。下面是三种方法的示例:

    直接在布局代码的tab里面添加标签页

    使用拖控件拖出来的TabHost,在它的布局层次上会有三个LinearLayout,id分别为tab1、tab2、tab3,如下图所示:
    这里写图片描述
    然后我们可以新建一个Layout,在这个Layout里设计好界面后,将xml代码直接放入tab(1、2、3)的标签里,如下图所示,将设计好了的文本标签放入了tab1这一标签当中:
    这里写图片描述

    这种方法比较简单、易懂,但这种方法只适合于小型的应用界面,如果应用界面很复杂的话,这个layout布局文件就会变得很大,不利于代码的维护。

    使用include标签代替layout

    include标签可以装载一个layout文件,嵌入在另一个layout文件里,十分有利于切分大型的布局文件,这是我的一篇关于include标签的使用的博文,http://blog.csdn.net/zgljl2012/article/details/44665643
    到这里,这个方法就应该比较好理解了,就是先设计一个layout布局文件,然后用include标签将其嵌入在某一个标签里即可。在此就不再赘述。

    使用addTab(TabSpec tabSpec)方法添加标签页

    mTabHost是TabHost控件,然后使用newTabSpec创建了一个TabSpec,并且设置了名字叫做我“页面三”,并且设定了它的内容是Tab3这个Activity:

    mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator("页面三")
                    .setContent(new Intent(this,Tab3.class)));
    

    上述三种方法建议使用第二种和第三种,第二种适合于静态的标签页展示;第三种则适合于需要与用户交互的标签页。

    展开全文
  • JavaScript 实现 标签页 切换效果

    千次阅读 2020-03-03 19:14:20
    JavaScript 实现标签页 切换效果 构建主体界面   HTML 代码 <h1>实现标签页的切换效果</h1> <ul id="tab"> <li><a href="">影视</a></li> <li><a href=...

    JavaScript 实现 标签页 切换效果


     构建主体界面

        

    HTML 代码

    <h1>实现标签页的切换效果</h1>
    <ul id="tab">
        <li><a href="">影视</a></li>
        <li><a href="">娱乐</a></li>
        <li><a href="">电视剧</a></li>
    </ul>
    <div id="content">
        <div id="content1">最新电影推荐:<br>《速度与激情》<br> 《超能陆战队》</div>
        <div id="content2">火爆娱乐推荐:<br>《奔跑吧兄弟》<br> 《中国好声音》</div>
        <div id="content3">热门电视剧推荐:<br>《三生三世》<br> 《我们的少年时代》</div>
    </div>

        

    编写 CSS 文件

    新建 CSS 文件,编写CSS 代码渲染之前编写的 HTML 界面。

    记得在 HTML 文件中引入编写的 CSS 文件。

    <link rel="stylesheet" href="mCSS.css">  

    CSS 文件代码

    *{
        margin: 0;
        padding: 0;
    }
    
    #tab {
        overflow: hidden;
    }
    
    #tab li {
        float: left;
        list-style: none;
        width: 80px;
        height: 40px;
        text-align: center;
    }
    
    #tab li:first-child, #content1 {
        background: #ffcc00;
    }
    
    #tab li:first-child + li, #content2 {
        background: #ff00cc;
    }
    
    #tab li:last-child, #content3 {
        background: #00ccff;
    }
    
    #tab li a {
        line-height: 40px;
        color: white;
        text-decoration: none;
    }
    
    #content {
        position: relative;
    }
    
    #content1, #content2, #content3 {
        width: 300px;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;
        padding: 30px;
        display: none;
    }
    
    #content1{
        display: block;
    }

         

    编写 JavaScript 脚本文件,实现切换效果

     JavaScript 代码

    // 当点某一个标签的时候对应的 div 显示,其他的隐藏。
    // 查找触发事件的元素
    var as = document.querySelectorAll("#tab a");
    // 绑定事件处理函数
    for (var i = 0; i < as.length; i++) {
        as[i].onclick = function () {
            // 隐藏所有的 div
            var divs = document.querySelectorAll("#content>div");
            for (var i = 0; i < divs.length; i++) {
                divs[i].style.display = "none";
            }
            // 让对应的 div显示
            // 获取当前的 a 的 href
            var i = this.href.lastIndexOf("#");
            var id = this.href.slice(i);
            console.log(id)
            document.querySelector(id).style.display = "block";
        }
    
    }

        

    完整案例代码

    mHTML.html

    <link rel="stylesheet" href="mCSS.css">
    
    <h1>实现标签页的切换效果</h1>
    <ul id="tab">
        <li><a href="#content1">影视</a></li>
        <li><a href="#content2">娱乐</a></li>
        <li><a href="#content3">电视剧</a></li>
    </ul>
    <div id="content">
        <div id="content1">最新电影推荐:<br>《速度与激情》<br> 《超能陆战队》</div>
        <div id="content2">火爆娱乐推荐:<br>《奔跑吧兄弟》<br> 《中国好声音》</div>
        <div id="content3">热门电视剧推荐:<br>《三生三世》<br> 《我们的少年时代》</div>
    </div>
    
    
    <script src="mJS.js"></script>

    mCSS.css

    *{
        margin: 0;
        padding: 0;
    }
    
    #tab {
        overflow: hidden;
    }
    
    #tab li {
        float: left;
        list-style: none;
        width: 80px;
        height: 40px;
        text-align: center;
    }
    
    #tab li:first-child, #content1 {
        background: #ffcc00;
    }
    
    #tab li:first-child + li, #content2 {
        background: #ff00cc;
    }
    
    #tab li:last-child, #content3 {
        background: #00ccff;
    }
    
    #tab li a {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 40px;
        color: white;
        text-decoration: none;
    }
    
    #content {
        position: relative;
    }
    
    #content1, #content2, #content3 {
        width: 300px;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;
        padding: 30px;
        display: none;
    }
    
    #content1{
        display: block;
    }

    mJS.js

    // 当点某一个标签的时候对应的 div 显示,其他的隐藏。
    // 查找触发事件的元素
    var as = document.querySelectorAll("#tab a");
    // 绑定事件处理函数
    for (var i = 0; i < as.length; i++) {
        as[i].onclick = function () {
            // 隐藏所有的 div
            var divs = document.querySelectorAll("#content>div");
            for (var i = 0; i < divs.length; i++) {
                divs[i].style.display = "none";
            }
            // 让对应的 div显示
            // 获取当前的 a 的 href
            var i = this.href.lastIndexOf("#");
            var id = this.href.slice(i);
            console.log(id)
            document.querySelector(id).style.display = "block";
        }
    
    }

    好嘞,完成这个功能,其实还是蛮好的~

    我自己敲得代码,自己截的图,发出来版权不明?

    展开全文
  • -顶部的标签栏隐藏了; -右上角三个按钮仍然存在:最小化、最大化、关闭; -拖住三个按钮下面的空白区域,可以拖动窗口位置。 步骤: 安装tab center reborn扩展,然后打开侧边栏,切换为Tab center reborn; 创建...

    先看效果(蓝底是win桌面):

    • 隐藏浏览器顶部的横向标签栏;
      • 全屏模式如下图,鼠标拖住顶部边缘任意位置可拖动窗口;
      • 非全屏模式左上角显示黑色块,可拖住黑色块移动窗口;
    • 保留右上角三个按钮:最小化、最大化、关闭;
    • 适配了隐私模式;

    在这里插入图片描述
    几个实用操作:

    • 当你打开很多标签页时,右击 非当前标签页 可以“释放标签页”,减少内存占用,等再切过去的时候会重新加载;
    • 点击当前标签页,会跳回上一次查看的标签页;再点击这个,又会跳回去。。。反复横跳;
    • 双击侧边栏下面的空白区域,可以新建标签页,,这样就不用定位到很小的“+”新建了;

    使浏览器能够在侧面显示垂直的标签栏,方便浏览大量标签页:

    • 安装tab center reborn扩展,然后打开侧边栏,切换为Tab center reborn;

    隐藏浏览器原来的顶部标签栏:

    • about:config搜索toolkit.legacyUserProfileCustomizations.stylesheets设置为true;

    • 创建userChrome.css

      • about:support页面打开“配置文件夹”

      • 在火狐的配置文件夹中创建chrome/userChrome.css文件,内容如下(我的Firefox版本85.0.2):

        #main-window:not([drawtitle="true"]):not([inFullscreen="true"]) 
        
        #nav-bar { 
            margin-left : 30px;  /* leftTop drag area */
            border-right: 140px solid var(--toolbar-bgcolor); 
        }
        :root[sizemode="maximized"] #nav-bar { 
            margin-top: 10px !important;   /* Top drag area */
            margin-left : 0px !important;  /* hidden leftTop drag area in Fullscreen mode*/
            border-right: 140px solid var(--toolbar-bgcolor); 
        }
        :root[privatebrowsingmode="temporary"] #nav-bar { 
            border-right: 180px solid var(--toolbar-bgcolor) !important; 
        }
        
        /* move down to hidden titlebar */
        #titlebar {
            margin-bottom: -31px !important;
        }
        
        /* move down 3 button on rightTop */
        .titlebar-buttonbox-container {
          margin-bottom: -5px !important;
        }
        :root[sizemode="maximized"] .titlebar-buttonbox-container {
          margin-bottom: -15px !important;
        }
        
        /* move down private icon */
        .private-browsing-indicator {
          margin-bottom: -8px !important;
        }
        :root[sizemode="maximized"] .private-browsing-indicator {
          margin-bottom: -18px !important;
        }
        
        /* hidden horizontal tabbar on top */
        #tabbrowser-tabs[orient="horizontal"] {
            visibility: collapse !important;
        }
        
        #sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] 
        sidebarheader { 
            visibility: collapse !important; 
        }
        
        
      • 重启浏览器生效!

    • 必要的样式优化(在浏览器的tab center reborn选项中设置)

      • 图标添加白色的晕轮廓 for dark mode

        body .tab .tab-icon {
        /*  侧边栏标签图标添加白色边缘晕 */
          filter: url('data:image/svg+xml;,<svg xmlns="http://www.w3.org/2000/svg"><filter id="s"><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -0.2125 -0.7154 -0.0721 1 0" /><feMorphology operator="dilate" radius="0.1"/><feComponentTransfer><feFuncA type="gamma" offset="0" amplitude="0.5" exponent="1"/></feComponentTransfer><feGaussianBlur stdDeviation="0.1"/><feComposite in="SourceGraphic" operator="over"/></filter></svg>#s');
        }
        
        #settings {
          display: none;  /* 隐藏侧边栏的选项按钮 */
        }
        
        .tab {
        /* 这几个用于自动隐藏滚动条 */
          max-width: 100vw;
        }
        #tablist {
          margin-right: -19px; /* 按需调整 */
          transition: margin-right 0.2s 0.3s;
        }
        #tablist:hover {
          margin-right: 0px;
          transition: margin-right 0.2s 0.1s;
        }
        #tablist-wrapper {
          overflow-x: hidden;
        }
        
        #tablist {
          scrollbar-width: thin; /* 细化滚动条 */
        }
        
    展开全文
  • 1、效果如下: 实现代码如下: <el-tab-pane name="first"> <span slot="label"> <span class="span-box"> <span>预警</span> <el-tooltip ... effect="dark
  • 在开发公共导航页面时,大家可能会遇到这样一个问题,在a标签点击跳转页面后,被点击的a标签添加的样式刷新后消失。 步骤 首先,我们需要先自定义一个类(Class); .selected{ background-color: #E31D2C;color:#...
  • VSCode打开多个文件时实现标签栏多行显示

    万次阅读 热门讨论 2020-07-06 22:59:46
    默认情况下,VSCode的标签栏是滚动式的,当打开多个文件时是在同一行中显示的,想要选择查看某个文件时很不方便。 如果想要实现多行显示标签页,也是可以的,具体方法如下。 操作步骤: 1. 安装Custom CSS and JS ...
  • vue+element-ui实现侧边菜单标签页联动

    千次阅读 多人点赞 2020-07-31 18:01:56
    使用vue+element-ui实现侧边栏菜单el-menu与el-tabs标签页联动效果 先看实现效果 实现思路 el-menu使用vue-router的模式,以index进行路由跳转,当前激活菜单:default-active="$route.path",这样就会默认以当前...
  • 基于element实现动态增减标签页

    千次阅读 2021-12-08 19:35:17
    基于element+vuex实现可以动态删减的标签页,并对当前打开的页面缓存
  • 项目使用vue-element-admin开发,在运行过程中发现,切换 tagsview标签栏导航时页面刷新了,没有保存下页面操作的内容,比如:查询框设置的内容,切换后没有了,需要重新设置查询条件,用户反映比较繁琐,要求要在...
  • vue实现多个tab标签页的切换与关闭

    千次阅读 2022-03-06 23:22:17
    1.实现效果 2.实现原理 vuex,实现对当前激活项,当前tab列表,当前tab的translateX,当前缓存...当点击tab标签页的时候,获取相应的激活项,动态的实现左侧菜单的选中状态,用watch监听,updateActiveName和upda
  • 在head标签添加: &lt;link rel="Bookmark" type="image/x-icon" href="b/img/icon/favicon.ico" /&gt; &lt;link rel="icon" type="image/x-icon"...
  • Vue+Element UI 侧边导航与标签页同步

    千次阅读 2021-04-23 11:44:44
    我看了其他人写的,但是我自己实现的时候始终没有实现,我的是导航标签页可以联动,但标签页和内容不能联动。后来我就干脆不用他们的方法了,跳转路由直接用 this.$router.push() 进行跳转。 原理: 侧边导航和...
  • Chrome浏览器,修改打开新标签页是Bing搜索默认页

    万次阅读 多人点赞 2019-05-20 10:49:01
    Chrome谷歌浏览器,使用默认的搜索引擎设置,当选择为Bing的时候,虽然默认搜索引擎设置为Bing了,但是打开新标签页的时候,我们看不“最常访问站点”的列表。 这样就很不方便。以下提供修改方案,使用Bing作为...
  • React + Router + Antd实现多标签页功能

    千次阅读 2021-07-26 10:35:59
    在传统的jsp开发的年代,比较流行的一种多标签页的实现方式是用 iframe 实现多标签功能,不过由于iframe有着性能以及兼容性问题,不过由于性能以及兼容性等问题,网页上嵌套iframe的用法逐渐被抛弃。 ...
  • easyUI的图表,在Vue中的展示就像这样的一张图表,需求很简单,就是每一行最右边的操作都有一个按键,可以操作单行的数据问题的出现:超简单!往里面放一个按钮不就可以了吗!于是,我试图着手在这一行里放入一个...
  • 给当前跳转的页面a标签添加样式 $(document).ready(function(){ var local=window.location.href; var tda=$('.td li a'); for(i=0;i;i++){ var cd=tda.length if(local.toLowerCase()==tda[i].href....
  • App在页面底部展现标签栏导航的效果,有多种实现方式,包括TabActivity方式、ActivityGroup方式、FragmentActivity方式等等,具体的实现方案参见之前的博文《Android开发笔记(十九)底部标签栏》。一般情况下这种...
  • vue结合elementUI实现tag多标签页

    千次阅读 多人点赞 2020-12-26 23:06:06
    vue结合elementUI实现tag多标签页 点击左侧菜单,会打开一个相应的tag标签页 点击tag标签可以在不同tag之间切换 如图: 以上图片的布局如下: <el-container> <BaseAside /> <el-main> &...
  • vue+element实现多标签页导航

    万次阅读 2019-08-13 19:09:28
    1.element-ui的el-tab标签页实现。 2.网上看的有个比较复杂的做法,我没采用,但是我具体代码写了出来,可供参考。 我用的是第一种方法,具体这周末补齐。 这两种做法都会出现一个问题:element弹窗背景遮罩...
  • edge搁置标签页The latest Microsoft Edge browser is based on Google Chrome’s Chromium software. Both browsers share many features, including the ability to customize the New Tab page that displays ...
  • firefox新标签页背景Firefox Quantum‘s new tab page has a lot of stuff on it, from recommended articles to highlights from your history. But if you don’t like that design, you aren’t stuck with it. ...
  • chromium 设置标签栏字体大小

    千次阅读 2020-03-20 16:55:42
    使用4k屏,网页内容可以放大,但标签栏字体太小。 修改方式,打开文件 .config/google-chrome/Default/Preference 找到两个项default_fixed_font_size和default_fixed_font_size,修改为自己需要的数值。 同时,可以...
  • vue 自定义标签页

    千次阅读 2018-12-19 19:46:29
    本篇文章我们通过以前学习过的知识来构建一个自己的标签页组件。 首先我们创建一个基于vue的项目,我用的IDE是webstorm。 创建好的工程目录结构: 我们先来分析一下我们需要做哪些工作,常见的标签页就像下面的...
  • 如何在Chrome中自定义新标签页

    千次阅读 2020-09-10 14:38:37
    即使您关闭了书签(Chrome菜单>书签>显示书签[未选中]),它也会在新标签页上临时显示您的书签,这非常方便。 添加您自己的网址 (Add Your Own URL) You can also display one of your favorite sites, such as ...
  • 更改chromium标签栏风格

    千次阅读 2015-03-27 16:33:54
    chromium的标签栏是一种波浪式的风格,如下图所示,为了更改风格,需要先了解它的绘制原理: 在src\chrome\browser\ui\views\tabs\tab_strip.cc中,有一个参数kTabHorizontalOffset。在每个标签按钮进行布局...
  • 搜索新标签页的相关应用 下载并安装,在选项中设置您要转的新标签页面网址 END 方法二 显示出您浏览器的书签 收藏您需要转的网页 鼠标中键点击书签即打开新的标签页...
  • visitedViews : 用户访问过的页面 就是标签栏导航显示的一个个 tag 数组集合 cachedViews : 实际 keep-alive 的路由。可以在配置路由的时候通过 meta.noCache 来设置是否需要缓存这个路由 默认都缓存。 缓存 利用...
  • 【mfc】标签页

    千次阅读 2015-02-13 13:28:28
    这个东西不必介绍了,现在在一个对话框中,还有几个没有标签页呢?不过尽管是很常见的东西,它的现实并不简单,它不是像VB那样拖拖控件就弄出来的,拖完之后还有比较复杂的一段过程,当然,弄熟了就不复杂了,弄几下...
  • 首先你需要一个Google 随便在搜索搜个啥,我就瞎打了个test:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 137,402
精华内容 54,960
关键字:

怎么把标签页添加到标签栏