精华内容
下载资源
问答
  • 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啊?求大神指教
  • html实现tab页面切换

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

    想要达到的样子呢就是这样的



    点击左边的tab可以切换右边frame页面

    实现这个的话,首先得有一个大的html文件作为容器承载左边的菜单栏和右边的显示栏,然后左边的菜单栏也是一个html文件,右边有三种显示样式,就得五个html文件,为了区别我们分别将其取名为framea(右边要显示的第一个页面)  frameb(右边要显示的第二个页面)framec(右边要显示的第三个页面)   mainframe(父容器)   contentframe(左边的菜单页面)

    首先是我们的菜单页面,布局很简单,就是三个a标签,指示着三个超链接

    <html>
    	
    	<body>	
    		<a href = "framea.html" target = "showframe">frameA</a></br>
    
    		<a href = "frameb.html" target = "showframe">frameB</a></br>
    		<a href = "framec.html" target = "showframe">frameC</a></br>
    	</body>
    </html>

    假定第一次打开页面时,显示的是页面framea,那么我们的父容器就应该这么写

    <html>
    
    
    <frameset cols= "20%,80%" width = "960px" noresize = "true">
    	
    	<frame src = "framec_content.html" >		
    	<frame src = "framea.html" name = "showframe" >	
    </frameset>
    </html>
    frameset是来控制里面的frame标签的,cols表示水平布局,左边占20%的空间,右边占80%的空间,noresize属性为false,设置了不允许鼠标的拖动改变左右两个布局的大小。当几个html文件放在同一个目录下时,我们指定其资源目录才能这么写,在给第二个frame指定资源后,给它一个name,这样在我们的菜单页点击超链接后,打开页面的target指向他即可了,不然我们点击超链接,页面会在菜单所在的那个位置打开,达不到我们想要的效果。

    接下来是framea,很简单 只是给了个背景颜色加以区分就ok了

    <html>
    	
    	<body bgcolor = "red">	
    FrameA
    	</body>
    </html>
    frameb也是如此

    <html>
    	
    	<body bgcolor = "blue">	
    FrameB
    	</body>
    </html>

    framec

    <html>
    	
    	<body bgcolor = "yellow">	
    FrameC
    	</body>
    </html>
    最后要做的就是把这几个html文件放在同一个目录下,用浏览器打开mainframe就可以达到我们想要的效果了。








    ps:小弟也是初学html,如果有哪些言论不准确或者错误的地方,烦请各位大神不吝赐教



    展开全文
  • 首先,带大家来看看实现的效果图,点击底部三个tab按钮来实现页面切换 具体实现代码如下: AppDelegate.m #import "AppDelegate.h" #import "RedViewController.h" #import "GreenViewController.h" #...

    首先,带大家来看看实现的效果图,点击底部三个tab按钮来实现页面的切换


    具体实现代码如下:

    AppDelegate.m

    #import "AppDelegate.h"
    #import "RedViewController.h"
    #import "GreenViewController.h"
    #import "BlueViewController.h"
    
    @interface AppDelegate ()
    
    @end
    
    @implementation AppDelegate
    
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        self.window = [[UIWindow alloc]initWithFrame:[[UIScreen mainScreen]bounds]];
        self.window.backgroundColor = [UIColor whiteColor];
        
        //创建tabbar所管理的子控制器,每个子控制器都带有一个导航
        RedViewController *redVC = [[RedViewController alloc]initWithNibName:@"RedViewController" bundle:nil];
        UINavigationController *navi1 = [[UINavigationController alloc]initWithRootViewController:redVC];
        GreenViewController *greenVC = [[GreenViewController alloc]initWithNibName:@"GreenViewController" bundle:nil];
        UINavigationController *navi2 = [[UINavigationController alloc]initWithRootViewController:greenVC];
        BlueViewController *blueVC = [[BlueViewController alloc]initWithNibName:@"BlueViewController" bundle:nil];
        UINavigationController *navi3 = [[UINavigationController alloc]initWithRootViewController:blueVC];
        //创建UITabBarController对象
        UITabBarController *tabbar = [[UITabBarController alloc]init];
        //设置tabbar的子控制器
        tabbar.viewControllers = @[navi1, navi2, navi3];
        //将标签控制器设置为根视图控制器,程序的第一个界面默认为标签控制器所管理的第一个子控制器的视图
        self.window.rootViewController = tabbar;
        [self.window makeKeyAndVisible];
        
        // Override point for customization after application launch.
        return YES;
    }
    
    - (void)applicationWillResignActive:(UIApplication *)application {
        // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
        // Use this method to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates. Games should use this method to pause the game.
    }
    
    - (void)applicationDidEnterBackground:(UIApplication *)application {
        // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
        // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
    }
    
    - (void)applicationWillEnterForeground:(UIApplication *)application {
        // Called as part of the transition from the background to the inactive state; here you can undo many of the changes made on entering the background.
    }
    
    - (void)applicationDidBecomeActive:(UIApplication *)application {
        // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
    }
    
    - (void)applicationWillTerminate:(UIApplication *)application {
        // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
    }
    
    @end
    


    RedViewController.m

    #import "RedViewController.h"
    
    @interface RedViewController ()
    
    @end
    
    @implementation RedViewController
    
    - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
    {
        self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
        if (self) {
            self.title = @"红色";
            self.tabBarItem.title = @"首页";
            self.tabBarItem.image = [UIImage imageNamed:@"menu_a"];
            self.tabBarItem.selectedImage = [UIImage imageNamed:@"menu_a1"];
    
        }
        return self;
    }
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view from its nib.
    }
    
    
    
    @end
    


    GreenViewController.m

    #import "GreenViewController.h"
    
    @interface GreenViewController ()
    
    @end
    
    @implementation GreenViewController
    
    - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
    {
        self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
        if (self) {
            self.title = @"绿色";
            self.tabBarItem.title = @"发现";
            self.tabBarItem.image = [UIImage imageNamed:@"menu_b"];
            self.tabBarItem.selectedImage = [UIImage imageNamed:@"menu_b1"];
        }
        return self;
    }
    
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view from its nib.
    }
    
    
    @end
    


    BlueViewController.m

    #import "BlueViewController.h"
    
    @interface BlueViewController ()
    
    @end
    
    @implementation BlueViewController
    
    - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
    {
        self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
        if (self) {
            self.title = @"蓝色";
            self.tabBarItem.title = @"我的";
            self.tabBarItem.image = [UIImage imageNamed:@"menu_d"];
            self.tabBarItem.selectedImage = [UIImage imageNamed:@"menu_d1"];
        }
        return self;
    }
    
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view from its nib.
    }
    
    
    
    @end
    


    展开全文
  • 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-...

    先上图:
    在这里插入图片描述
    标题:通过路由来实现简单的tab切换

    import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    import {
        BrowserRouter as Router,
        Switch,
        Route,
        Link,
        Redirect
    } from 'react-router-dom'
    
    function App() {
        let tabHead=[
            {
                link:'/page1',
                name:'页面1'
            },
            {
                link:'/page2',
                name:'页面2'
            },
            {
                link:'/page3',
                name:'页面3'
            }
        ]
        let routes=[
            {
                path:'/page1',
                component:Page1
            },
            {
                path:'/page2',
                component:Page2
            },
            {
                path:'/page3',
                component:Page3
            }
        ]
        return (
            <div className="App">
                <Router>
                    <div>
                        <ul className="App-tab">
                            {
                                tabHead.map(item=>{
                                    return <li className="App-tab-item" key={item.link}>
                                                <Link to={item.link}>{item.name}</Link>
                                            </li>
                                })
                            }
                        </ul>
                    </div>
                    <Switch>
                        {
                            routes.map(item=>{
                                return <Route path={item.path} component={item.component} key={item.path}></Route>
                            })
                        }
                    <Redirect to="/page1" />
                    </Switch>
                </Router>
            </div>
        );
    }
    
    function Page1(){
        return (
            <div>
              <h1>  页面1的内容</h1>
            </div>
        )
    }
    function Page2(){
        return (
            <div>
                <h1>页面2的内容</h1>
            </div>
        )
    }
    function Page3(){
        return (
            <div>
               <h1> 页面3的内容</h1>
            </div>
        )
    }
    
    
    export default App;
    
    

    注意点:
    1.react-router有很多个版本,一般会默认安装最新的包,并且4.x以上有很大的改版,不建议参考过期的文档,中文文档一般都是低版本的。本文用的是5.x版本,官网:https://reactrouter.com/web/guides/quick-start
    2.所有的</Route>最终都在一个唯一的</Router>下面。</Route>的匹对受顺序的影响,匹对顺序是从上往下,比如

    <Router>
          <div>
            <Switch>
              <Route path="/">
                <Home />
              </Route>
              <Route path="/about">
                <About />
              </Route>
              <Route path="/users">
                <Users />
              </Route>
            </Switch>
          </div>
        </Router>
    

    这样匹配,访问/about是看不到页面内容的。因为它把所有的/xxx都匹配到了/路由页面去了。如果把/放到最后,则可以访问。如下面

    <Router>
          <div>
            <Switch>
              <Route path="/about">
                <About />
              </Route>
              <Route path="/users">
                <Users />
              </Route>
            </Switch>
            <Route path="/">
                <Home />
              </Route>
          </div>
        </Router>
    

    3.exact的作用:不加就会匹配所有,像上面 /,/about,/users,这样的顺序写,如果不把/放到最后匹配,还有一种方法是exact严格匹配,能达到同样的效果。如下:

    <Router>
          <div>
            <Switch>
              <Route path="/" exact>
                <Home />
              </Route>
              <Route path="/about">
                <About />
              </Route>
              <Route path="/users">
                <Users />
              </Route>
            </Switch>
          </div>
        </Router>
    

    4.新版本和旧版本的嵌套方式不一样,4.x以上不能直接将</Route>嵌套在</Route>里面。是在不同组件里面嵌套,可以参考官网,写的很清楚。
    5.关于switch的作用:https://www.jianshu.com/p/d5173d7b411a

    展开全文
  • 微信小程序实现tab页面切换功能

    千次阅读 2018-07-12 15:08:45
    scroll-view scroll-x="true" class="ip_tab_comtainer"> <view class="ip_tab_comtainer_padd"></view> <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}"> ...

    图片.png

     

    wxml

    <scroll-view scroll-x="true" class="ip_tab_comtainer">
      <view class="ip_tab_comtainer_padd"></view>
      <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}">
        <view class="{{ip.isSelect?'ip_tab_item_s':'ip_tab_item_n'}}" bindtap="onIpItemClick" wx:key="{{ip.id}}" data-item="{{ip}}">
          {{ip.title}}
        </view>
      </block>
      <view class="ip_tab_comtainer_padd"></view>
    </scroll-view>
    <view class='content'>
    {{content}}
    </view>
    
    

    wxss

    .ip_tab_comtainer {
        width: 100%;
        background-color: #F5F5F5;
        padding: 20rpx 0 0;
        white-space: nowrap;
    }
    
    .ip_tab_comtainer_padd {
        display: inline-block;
        width: 24rpx;
    }
    
    .ip_tab_item_s {
        display: inline-block;
        line-height: 40rpx;
        padding: 12rpx 32rpx;
        color: #91daf9;
        margin-right: 8rpx;
        margin-left: 8rpx;
        font-size: 28rpx;
       
        overflow: hidden;
      
        background-color: #ffffff;
       
        border: 1px solid #91daf9;
    }
    
    .ip_tab_item_n {
        display: inline-block;
        padding: 12rpx 32rpx;
        line-height: 40rpx;
        color: #353535;
        margin-right: 8rpx;
        background-color: #ffffff;
        margin-left: 8rpx;
        font-size: 28rpx;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 4rpx;
        border: 1px solid #CCCCCC;
    }
    
    /**
    去除横向滚动条
    */
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
    }
    
    .content{
      width: 100%;
    }
    

    js

    // pages/horizontal-scroll_tab/horizontal-scroll_tab.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        ips: [
          { id: "1", title: "日统计", isSelect:true },
          { id: "2", title: "月统计", isSelect: false},
          { id: "3", title: "年统计", isSelect: false},
         
        ],
        content:"全部"
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
        * item点击事件
        */
      onIpItemClick: function (event) {
        console.log(event);
        var id = event.currentTarget.dataset.item.id;
        var curIndex = 0;
        for (var i = 0; i < this.data.ips.length; i++) {
          if (id == this.data.ips[i].id) {
            this.data.ips[i].isSelect = true;
            curIndex = i;
          } else {
            this.data.ips[i].isSelect = false;
          }
        }
    
        this.setData({
          content: this.data.ips[curIndex].title,
          ips: this.data.ips,
        });
      },
    
    })
    

     

    • 关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

    展开全文
  • 原生 js 鼠标悬停时 tab页面切换

    千次阅读 2019-01-11 17:54:27
    示例: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&...Tab效果&lt;/title&gt; &lt;style type="text/css"&gt; ul{ li
  • 最简单的tab页面切换+动画

    千次阅读 2017-07-11 10:46:18
    废话不多说,直接上代码: <!DOCTYPE html> , initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="
  • Tab页面切换之3种方法

    千次阅读 2015-07-31 00:04:13
    //添加页面,并且返回该页面 View view = mViews.get(position); container.addView(view); return view; } @Override public boolean isViewFromObject(View arg0, Object arg1) { ...
  • Fragment 页面切换不能滑动 所以对于listview 可以添加的左右滑动事件 ,不会有冲突例如(QQ的好友列表的删除) Fragment 和viewpager 的区别 Viewpager 的事件都需要写在 MainActivity 使得 MainActivity 类非常...
  • 如上,tab标签选中加了默认样式,但是其他无论怎么换,首页都是默认选中的样式 这里给index的路由加一个exact就可以了。 < NavLink to ="/" exact activeClassName ="nav-active" > 首页 NavLink > ...
  • 在界面交互开发中,除了上篇文章讲到的底部导航栏经常使用到,还有一个类似功能,就是顶部的Tab页面切换。效果大致如下 它需要使用到两个控件,TabLayout和ViewPager,这样不仅滑动内容能够切换Tab页面,点击Tab...
  • 左侧Tab切换页面实现

    千次阅读 2008-06-27 11:19:00
    最近在家待业,一边找工作,一边在学习Web前段的开发,刚好自己在玩一个站点,目前正在设计中,在PS中做好图后转化成页面,今天在碰到一个需要实现左侧Tab页面切换的效果,研究了一下,最终实现,在CSDN中记录下来,...
  • html5 滑动页面切换tab

    2016-02-18 16:32:31
    html5 滑动页面切换tab,点击tab也可以切换,非常实用。
  • Tablyout 点击tab切换页面闪烁

    千次阅读 2016-04-24 18:42:35
    最近在做一个项目,使用5.0自带的TabLayout做导航栏,实现ViewPager+Fragment页面切换,后面发现从第一个tab直接切换到最后一个tab 的时候页面切换闪烁,网上查了一下,需要监听tabLayout的...
  • test &amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;quot;tab1&amp;amp;amp;...weui-tab__bd-item weui-tab__bd-item--active&amp;amp;amp;amp;quot;&amp;amp;amp
  • Tab切换页面自动刷新效果

    万次阅读 2017-12-04 11:15:03
    Tab切换页面自动刷新效果
  • Pyqt5 Tab页面切换内容图 前言 提示:Pyqt5 Tab页面切换内容 提示:以下是本篇文章正文内容,下面案例可供参考 一、完整代码 1.直接复制运行 代码如下(示例): # 主要的思路就是创建两个frame(如果有两个...
  • H5 tab切换页面

    万次阅读 2018-02-11 18:42:01
    <title>H5 tab切换页面</title> <style type="text/css"> html{margin: 0; padding: 0;} body{margin: 0 auto; padding: 0;max-width: 1000px; background: #f5f6f8;font-size: 14px;} .m-header{position: ...
  • React tab切换页面

    千次阅读 2018-12-05 14:34:12
    <li className={"m-sys-tab " + (tabActiveIndex === 0 ? 'active': '')} onClick={this.handleTabClick.bind(this, 0)}> <Icon type="tuandui" className="m-sys-tab-icon"/> ...
  • 控制tab页面切换

    千次阅读 2018-03-22 09:45:44
       ${sflag==1}'>active</c:if>">  ${ctxF}' value='workdynamics/home-info_90?sflag=1'/>" >综合动态    ${sflag==2}'>active</c:if>">  ${ctxF}' value='workdynamics/home-info_91?...控制四个页面切换
  • 之前公司遇到几个两个项目都有一个列表切换的功能,具体功能就是点击tab列表,内容根据tab切换来变换,效果如下: 这样一个很常见功能 网上例子较少,后来学到一个方法,几步就可以实现,不需要写代码 第一步 建立...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 74,026
精华内容 29,610
关键字:

tab页面切换