当前位置：首页 > 代码 > 正文

手机网页tab切换代码（移动端tab切换）

admin 发布：2022-12-19 05:20 101

本篇文章给大家谈谈手机网页tab切换代码，以及移动端tab切换对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

求 tab 自动移动的代码

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";quot;

html xmlns=";quot;

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title选项卡/title

style type="text/css"

!--

/* 初始化 */

body {

font: 12px/1 "宋体", SimSun, serif;

background:#fff;

color:#000;

}

ul,

li,

dl,

dt,

dd {

margin:0;

padding:0; /* 清除浏览器默认的margin和padding值 */

}

ul,

li {

list-style:none outside; /* 清除浏览器中列表项默认的占位 */

}

a {

text-decoration:none;

}

img {

border:0;

}

/* 选项卡整体外观定义 */

.tabList {

width:400px;

height:160px;

overflow:hidden;

}

.tabList .tabBox {

height:100%;

position:relative;

background:#09c;

}

.tabList .tabBox li {

float:left;

width:25%;

text-align:center;

}

.tabList h4 {

margin:0;

height:26px;

font-size:1em;

line-height:22px;

}

.tabList h4 a {

color:#039;

font-weight:normal;

display:block;

background:#bfeafd url() no-repeat;

padding-left:5px;

}

.tabList h4 a span {

display:block;

background:url() no-repeat top right;

padding-right:5px;

}

.tabList h4 a:hover,

.tabList .tabOn h4 a{

background-position:0 -50px;

}

.tabList h4 a:hover span,

.tabList .tabOn h4 a span {

background-position:right -50px;

}

.tabList .tabContentBox li{

width:auto;

margin-top:0;

}

.tabList .tabContentBox {

width:390px;

height:130px;

border:1px solid #069;

text-align:left;

overflow:hidden;

background:#fff;

position:absolute;

top:22px;

left:0;

display:none;

margin:4px;

}

.tabList li:hover .tabContentBox,

.tabList .tabOn .tabContentBox {

display:block;

}

/* 以下是对各项内容的CSS定义 */

.tabList .tabContentBox .blog,

.tabList .tabContentBox .group {

color:#999;

line-height:2em;

margin:5px;

}

.tabList .tabContentBox .blog dt,

.tabList .tabContentBox .group dt,

.tabList .tabContentBox .blog dd,

.tabList .tabContentBox .group dd{

float:left;

border-bottom: 1px dotted #9cf;

}

.tabList .tabContentBox .blog dt,

.tabList .tabContentBox .group dt {

width:60%;

white-space:nowrap;

overflow:hidden;

clear:left;

font-size:1.1em;

}

.tabList .tabContentBox .blog dt a,

.tabList .tabContentBox .group dt a {

color:#039;

display:block;

margin-left:5px;

padding-left:12px;

background: url() no-repeat 5px 11px;

}

.tabList .tabContentBox .blog dt a:hover,

.tabList .tabContentBox .group dt a:hover {

color:#f90;

background-position:5px -19px;

}

.tabList .tabContentBox .blog dd,

.tabList .tabContentBox .group dd {

color:#0cf;

width:20%;

float:left;

white-space:nowrap;

overflow:hidden;

}

.tabList .tabContentBox .blog dd a,

.tabList .tabContentBox .group dd a {

color:#069;

}

.tabList .tabContentBox .blog dd a:hover,

.tabList .tabContentBox .group dd a:hover {

color:#f90;

}

.tabList .tabContentBox .album li,

.tabList .tabContentBox .share li{

width:24.9%;

float:left;

padding-top:15px;

text-align:center;

}

--

/style

script type="text/javascript" language="javascript"

!--

window.onload = tabEffect;

function tabEffect()

{

var allElements = document.getElementsByTagName('*');

for (var i=0; iallElements.length; i++)

{

if (allElements[i].className.indexOf('tabOption') = 0)

{

allElements[i].onmouseover = mouseOver;

}

}

}

function mouseOver()

{

tabList = this.parentNode;

tabOptions = tabList.getElementsByTagName("li");

for (var i=0; itabOptions.length; i++)

{

if (tabOptions[i].className.indexOf('tabOption') = 0)

{

tabOptions[i].className = "tabOption";

}

}

this.className += " tabOn";

}

--

/script

/head

body

div class="tabList" id="tabList1"

ul class="tabBox"

li class="tabOption tabOn"h4a href="/blog/" title="单击，跳转到所有[日志]列表"span日志/span/a/h4

div class="tabContentBox"

dl class="tabContent blog"

dta href=";quot; title="在PHP中实现文件的上传功能的方法"在PHP中实现文件的上传功能的方法/a/dt

dd class="name"a href="#11" title=""QUESTER/a/dd

dd2009-01-10/dd

dta href=";quot; title="Fireworks教程:小灯泡绘制全过程"Fireworks教程:小灯泡绘制全过程/a/dt

dd class="name"a href="#11" title="作者：snl"snl/a/dd

dd2009-01-10/dd

dta href=";quot; title="PHP程序不实用大型系统的九大原因"PHP程序不实用大型系统的九大原因/a/dt

dd class="name"a href="#11" title="作者：豆猫"豆猫/a/dd

dd2009-01-10/dd

dta href=";quot; title="Flash鼠绘:绘制金属立体相框效"Photoshop制作一张旧的黑桃A扑克牌/a/dt

dd class="name"a href="#11" title="作者：greengnn"greengnn/a/dd

dd2009-01-10/dd

dta href=";quot; title="日志标题：Photoshop CS3教程"Photoshop CS3教程/a/dt

dd class="name"a href="#11" title="作者：amethyst01"amethyst01/a/dd

dd2009-01-10/dd

/dl

/div

/li

li class="tabOption"h4a href="/album/" title="单击，跳转到所有[相册]列表"span相册/span/a/h4

div class="tabContentBox"

ul class="tabContent album"

lia href="#" title="查看相册内容"img src=";quot; width="80" height="100" alt="封面" title="相册的标题" //a/li

lia href="#" title="查看相册内容"img src=";quot; width="80" height="100" alt="封面" title="相册的标题" //a/li

lia href="#" title="查看相册内容"img src=";quot; width="80" height="100" alt="封面" title="相册的标题" //a/li

lia href="#" title="查看相册内容"img src=";quot; width="80" height="100" alt="封面" title="相册的标题" //a/li /ul

/div

/li

li class="tabOption"h4a href="/share/" title="单击，跳转到所有[分享]列表"span分享/span/a/h4

div class="tabContentBox"

ul class="tabContent share"

lia href="#" title="查看内容"img src=";quot; width="80" height="100" alt="封面" title="相册的标题" //a/li

lia href="#" title="查看内容"img src=";quot; width="80" height="100" alt="封面" title="相册的标题" //a/li

lia href="#" title="查看内容"img src=";quot; width="80" height="100" alt="封面" title="相册的标题" //a/li

lia href="#" title="查看内容"img src=";quot; width="80" height="100" alt="封面" title="相册的标题" //a/li

/ul

/div

/li

li class="tabOption"h4a href="/group/" title="单击，跳转到所有[群组]列表"span群组/span/a/h4

div class="tabContentBox"

dl class="tabContent group"

dta href=";quot; title="标题：优秀广告设计，不服不行！"优秀广告设计，不服不行！/a/dt

dd class="name"a href="#11" title="群组：设计视觉"设计视觉/a/dd

dd2009-01-10/dd

dta href=";quot; title="标题：Photoshop 的真人动漫效果"Photoshop 的真人动漫效果/a/dt

dd class="name"a href="#11" title="群组：手绘爱好者"手绘爱好者/a/dd

dd2009-01-10/dd

dta href=";quot; title="标题：网站内容结构化探讨"网站内容结构化探讨/a/dt

dd class="name"a href="#11" title="群组：WEB标准化"WEB标准化/a/dd

dd2009-01-10/dd

dta href=";quot; title="标题：CSSzengarden的代码里还有什么"CSSzengarden的代码里还有什么/a/dt

dd class="name"a href="#11" title="群组：WEB标准化"WEB标准化/a/dd

dd2009-01-10/dd

dta href=";quot; title="标题：某些人眼中的色彩"某些人眼中的色彩/a/dt

dd class="name"a href="#11" title="群组：设计视觉"设计视觉/a/dd

dd2009-01-10/dd

/dl

/div

/li

/ul

/div

/body

/html

要会改代码 背景给你拉

android tablayout怎么使用代码切换tab

android tablayout怎么使用代码切换tab

重新设置点击事件

viewPager.setAdapter(pagerAdapter);

tabLayout.setupWithViewPager(viewPager);

for (int i = 0; i tabLayout.getTabCount(); i++) {

TabLayout.Tab tab = tabLayout.getTabAt(i);

if (tab != null) {

tab.setCustomView(pagerAdapter.getTabView(i));

if (tab.getCustomView() != null) {

View tabView = (View) tab.getCustomView().getParent();

tabView.setTag(i);

tabView.setOnClickListener(mTabOnClickListener);

}

}

}

viewPager.setCurrentItem(1);

处理点击事件

private View.OnClickListener mTabOnClickListener = new View.OnClickListener() {

@Override

public void onClick(View view) {

int pos = (int) view.getTag();

if (pos == 0) {

Toast.makeText(BottomTabActivity.this, "您还没有登录", Toast.LENGTH_SHORT).show();

//TODO 跳转到登录界面

} else {

TabLayout.Tab tab = tabLayout.getTabAt(pos);

if (tab != null) {

tab.select();

}

}

}

};

一个页面内加入三个tab选项卡的代码

style type="text/css"

!--

body{ padding:0;font:12px "宋体"; }

/*选项卡1*/

#lib_Tab1{width:500px;margin:0px;padding:0px;margin-bottom:15px;}

/*选项卡2*/

#lib_Tab2{width:576px;margin:0px;padding:0px;margin-bottom:15px; }

/*菜单class*/

.lib_tabborder{border:1px solid #95C9E1;}

.lib_Menubox {height:28px;line-height:28px;position:relative;}

.lib_Menubox ul{margin:0px;padding:0px;list-style:none; position:absolute; top:3px; left:0; margin-left:10px; height:25px;text-align:center;}

.lib_Menubox li{float:left;display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-right:2px;height:25px;line-height:25px; background-color:#E4F2FD}

.lib_Menubox li.hover{padding:0px;background:#fff;width:116px;border-left:1px solid #95C9E1;border-top:1px solid #95C9E1;border-right:1px solid #95C9E1;

color:#739242;height:25px;line-height:25px;}

.lib_Contentbox{clear:both;margin-top:0px; border-top:none;height:181px; text-align:center;padding-top:8px;}

--

/style

script

!--

function setTab(name,cursel,n){

for(i=1;i=n;i++){

var menu=document.getElementById(name+i);

var con=document.getElementById("con_"+name+"_"+i);

menu.className=i==cursel?"hover":"";

con.style.display=i==cursel?"block":"none";

}

}

//--

/script

/head

body

div id="lib_Tab1"

div class="lib_Menubox lib_tabborder"

ul

li id="one1" onclick="setTab('one',1,4)" class="hover"新闻1/li

li id="one2" onclick="setTab('one',2,4)" 新闻2/li

li id="one3" onclick="setTab('one',3,4)"新闻3/li

li id="one4" onclick="setTab('one',4,4)"新闻4/li

/ul

/div

div class="lib_Contentbox lib_tabborder"

div id="con_one_1" 新闻列表1/div

div id="con_one_2" style="display:none"新闻列表2/div

div id="con_one_3" style="display:none"新闻列表3/div

div id="con_one_4" style="display:none"新闻列表4/div

/div

/div

div id="lib_Tab2"

div class="lib_Menubox lib_tabborder"

ul

li id="two1" onclick="setTab('two',1,4)" 新闻1/li

li id="two2" onclick="setTab('two',2,4)"class="hover" 新闻2/li

li id="two3" onclick="setTab('two',3,4)"新闻3/li

li id="two4" onclick="setTab('two',4,4)"新闻4/li

/ul

/div

div class="lib_Contentbox lib_tabborder"

div id="con_two_1" 新闻列表1/div

div id="con_two_2" style="display:none"新闻列表2/div

div id="con_two_3" style="display:none"新闻列表3/div

div id="con_two_4" style="display:none"新闻列表4/div

/div

/div

bR /

div id="lib_Tab3"

div class="lib_Menubox lib_tabborder"

ul

li id="tab1" onclick="setTab('tab',1,4)" 新闻1/li

li id="tab2" onclick="setTab('tab',2,4)"class="hover" 新闻2/li

li id="tab3" onclick="setTab('tab',3,4)"新闻3/li

li id="tab4" onclick="setTab('tab',4,4)"新闻4/li

/ul

/div

移动端html5怎么实现原生tab滑动切换

　我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目，我们说的TAB一般由导航条和TAB对应的内容组成，切换导航条上的标签同时标签对应的内容也会跟着切换。

我们准备一个TAB导航#pagenavi，里面包含TAB导航要切换的四个导航按钮，然后是切换的主体内容#slider，这里应该放置四个li与导航按钮对应，内容自定义。

由于是移动端应用，我们加载zepto.js，zepto就是体积小的jquery。然后需要加载触屏滑动插件touchslider.js。

接下来我们就直接调用TouchSlider，通过设置绑定tab，滑动方向、速度、时间等信息实现内容切换，请看详细代码：

script type="text/javascript"

var page='pagenavi';

var mslide='slider';

var mtitle='emtitle';

arrdiv = 'arrdiv';

var as=document.getElementById(page).getElementsByTagName('a');

var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){

var as=document.getElementById(this.page).getElementsByTagName('a');

as[this.p].className='';

as[index].className='active';

this.p=index;

var txt=as[index].innerText;

$("#"+this.page).parent().find('.emtitle').text(txt);

var txturl=as[index].getAttribute('href');

var turl=txturl.split('#');

$("#"+this.page).parent().find('.go_btn').attr('href',turl[1]);

}});

tt.page = page;

tt.p = 0;

for(var i=0;ias.length;i++){

(function(){

var j=i;

as[j].tt = tt;

as[j].onclick=function(){

this.tt.slide(j);

return false;

}

})();

}

/script

求帮忙写一下这个TAB切换标签HTML代码

两种解决方案：

方案1：多个标签，下面的DIV只需要一个，每切换到一个标签通过ajax获取相应数据，然后填充到div中，这个因为涉及到ajax你可能不会，所以跳过，用下一个

文案2：标签与下面的DIV一一对应，DIV默认先全部隐藏，切换到哪个标签就显示对应的DIV。

先来样式表

style type="text/css"

    a{border:1px solid #f00;margin:10px;padding:10px;}

    div.show{display:none;border:1px solid #00f;padding:20px;margin:20px}

/style

再来html

p

a标签1/aa标签2/aa标签3/a

/p

div class="show" id="show0"内容1/div

div class="show" id="show1"内容2/div

div class="show" id="show2"内容3/div

JS脚本

$("p a").mouseover(function () {

        $(".show").hide();

        $("#show" + $(this).index()).fadeIn(500)

    })

关于手机网页tab切换代码和移动端tab切换的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。

标签：

版权说明：如非注明，本站文章均为 AH站长 原创，转载请注明出处和附带本文链接；

本文地址：http://ahzz.com.cn/post/3008.html；

相关推荐

取消回复欢迎 你 发表评论:

标签列表
最近发表
友情链接
闽ICP备2023004790号 厦门爱流量网络科技有限公司 版权所有

分享到

温馨提示

下载成功了么？或者链接失效了？

联系我们反馈

立即下载