Tab滑动

原创 2015年11月19日 14:51:47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>本站自制TAB选项卡滑动门 站长学院 www.pigzz.com</title>
    <style type="text/css">
    *{ margin:0px; padding:0px;}
    #tabWarp{ width:400px; height:300px; border:1px solid #ccc; margin:10px auto;}
    #tabMenu{ width:400px; height:25px; overflow:hidden; border-bottom:1px solid #ccc; margin-top:5px;}
    #tabMenu ul li{ width:80px; float:left; list-style:none; font-size:12px; line-height:25px; height:25px; text-align:center; color:#0066CC; cursor:pointer; border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc; margin:0px 5px;}
    #tabMenu ul li.curent{ font-size:13px; background:#FBF5E1; font-weight:bold; color:#FF6600;}
    #tabContent{ width:390px; height:360px; padding:5px; font-size:12px;}
    #tabContent .hide{ display:none;}
    </style>
    </head>
    <body>
    <h1 id="what"></h1>
    <div id="tabWarp">
    <div id="tabMenu">
    <ul>
    <li class="curent">中餐</li>
    <li>西餐</li>
    <li>亚洲菜</li>
    <li>河南菜</li>
    </ul>
    </div>
    <div id="tabContent">
    <div>
    <p>中餐的内容</p>
    </div>
    <div class="hide">
    <p>西餐的内容</p>
    </div>
    <div class="hide">
    <p>亚洲菜的内容</p>
    </div>
    <div class="hide">
    <p>河南菜的内容</p>
    </div>
    </div>
    </div>
    <script>
    function fgTab(tabNav,tabBody){
    var tabMenu=document.getElementById(tabNav);
    var tabTitle=tabMenu.getElementsByTagName('li');
    var tabContent=document.getElementById(tabBody);
    var tabBody=tabContent.getElementsByTagName('div');
    function switchTab(i){
    tabTitle[i].onmouseover=function(){
    for(j=0; j<tabTitle.length; j++){
    if(i==j){
    tabTitle[j].className='curent';
    tabBody[j].style.display="block";
    }else{
    tabTitle[j].className='';
    tabBody[j].style.display="none";
    }
    }
    document.getElementById('what').innerHTML = i+'<br/>'+out();
    }
    }
    for( i=0; i<tabTitle.length; i++){
    switchTab(i);
    }
    }
    function out(){
    return i + '<br/>'+j;
    }
    </script>
    <script>
    fgTab('tabMenu','tabContent');
    </script>
    </body>
    </html>

Android可滑动的Tab页

RadioGroup+ViewPager+Fragment实现的可滑动的Tab页,非常的灵活。 最终效果图   部分源码 MainActivity package com.example.shen....
  • shenyuanqing
  • shenyuanqing
  • 2015年08月30日 17:17
  • 2365

移动端tab点解切换和滑动切换

今天                                           明天                                           大前天 ...
  • impossible1994727
  • impossible1994727
  • 2017年05月24日 16:07
  • 929

自定义tab,下边是viewpager。滑动viewpager,tab跟着动,点击tab,有动画效果并且viewpager也动。

自定义tab,下边是viewpager。滑动viewpager,tab跟着动,点击tab,有动画效果并且viewpager也动。按住viewpager滑动,tab也相应滑动 并且viewpager中...
  • WaterTheGreat
  • WaterTheGreat
  • 2016年08月02日 16:45
  • 666

ionic实现可滑动的tab

利用ionic的slide-box组件实现可滑动的tab,主要是监听tab点击以及slide页面滑动的事件,做相应的处理,用ng-repeat循环,优化、简略了代码,有需要的同学可以看看...
  • lishihong108
  • lishihong108
  • 2016年08月25日 17:01
  • 2514

教你实现Android下划线能滑动的Tab标签页

效果图如下,点击对应的Tab标签或者滑动屏幕则可跳转到对应的页面,并且底部的横线也会滑动到对应的Tab标签下面 顶部的导航栏使用三个TextView实现,下划线就是一个ImageView加载了一...
  • zhuwentao2150
  • zhuwentao2150
  • 2016年05月14日 23:18
  • 6830

tab随下划线同步滑动

大家肯定见过很多滑块下面的下划线随之滑块一块运动的效果,大家看网上的代码发现,大神们写的代码十分的复杂,其实一方面大神考虑的东西比较多,再就是大神懒的把代码摘出来,让咱们这种菜鸟来学习。小编最近整理了...
  • qq_26531985
  • qq_26531985
  • 2015年03月19日 10:01
  • 381

android开发之高仿微信6.0+滑动Tab

上篇博文【android开发之Fragment利用Bundle保存状态】用到滑动切换底部Tab,由于上篇博文的重点是保存Fragment状态,并没有说明,今天来解释一下。 关于高仿微信6.0滑动Tab...
  • zengdesen
  • zengdesen
  • 2015年12月03日 20:06
  • 912

随笔:tab标签随手势左右滑动的渐变效果,类似微信

随笔:tab标签随手势左右滑动的渐变效果,类似微信效果图: 没有借鉴过其他类似效果的项目,自己琢磨出来后才发现原来有其他人写过这个东西,还有很多可以改进的地方,我只是做个暂时记录,看到的童鞋就看看吧...
  • u014716362
  • u014716362
  • 2016年06月22日 11:22
  • 716

Android自定义View实战(SlideTab-可滑动的选择器)

转载请标明出处: http://blog.csdn.net/xmxkf/article/details/52178553 本文出自:【openXu的博客】目录: 初步分析重写onDraw绘制 重写...
  • u010163442
  • u010163442
  • 2016年08月11日 03:50
  • 4263

微信小程序滚动Tab选项卡:左右可滑动切换

最终效果如上。问题: 1、tab标题总共8个,所以一屏无法全部显示。 2、tab内容区左右滑动切换时,tab标题随即做标记(active)。 3、当active的标题不在当前屏显示时...
  • Sophie_U
  • Sophie_U
  • 2017年05月12日 16:10
  • 14268
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Tab滑动
举报原因:
原因补充:

(最多只允许输入30个字)