典型js选项卡代码

最新推荐文章于 2024-09-29 10:16:10 发布
最新推荐文章于 2024-09-29 10:16:10 发布
阅读量547 收藏
点赞数
分类专栏： DIV+CSS及兼容 文章标签： class xhtml div html url float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boboxiaopangde/article/details/6548307
版权

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>简洁Tab</title>

<style type="text/css">

<!--

body,div,ul,li{

padding:0;

text-align:center;

}

body{

font:12px "宋体";

text-align:center;

}

a:link{

color:#00F;

text-decoration:none;

}

a:visited {

color: #00F;

text-decoration:none;

}

a:hover {

color: #c00;

text-decoration:underline;

}

ul{ list-style:none;}

/*选项卡1*/

#Tab1{

width:460px;

margin:0px;

padding:0px;

margin:0 auto;}

/*选项卡2*/

#Tab2{

width:576px;

margin:0px;

padding:0px;

margin:0 auto;}

/*菜单class*/

.Menubox {

width:100%;

background:url(http://www.lanrentuku.com/images/uppic/200801081251340.gif);

height:28px;

line-height:28px;

}

.Menubox ul{

margin:0px;

padding:0px;

}

.Menubox li{

float:left;

display:block;

cursor:pointer;

width:114px;

text-align:center;

color:#949694;

font-weight:bold;

}

.Menubox li.hover{

padding:0px;

background:#fff;

width:116px;

border-left:1px solid #A8C29F;

border-top:1px solid #A8C29F;

border-right:1px solid #A8C29F;

background:url(http://www.lanrentuku.com/images/uppic/200801081249070.gif);

color:#739242;

font-weight:bold;

height:27px;

line-height:27px;

}

.Contentbox{

clear:both;

margin-top:0px;

border:1px solid #A8C29F;

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>

<br><br>

<div id="Tab1">

<div class="Menubox">

<ul>

<li id="one1" οnclick="setTab('one',1,4)" class="hover">新闻1</li>

<li id="one2" οnclick="setTab('one',2,4)" >新闻2</li>

<li id="one3" οnclick="setTab('one',3,4)">新闻3</li>

<li id="one4" οnclick="setTab('one',4,4)">新闻4</li>

</ul>

</div>

<div class="Contentbox">

<div id="con_one_1" class="hover">新闻列表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>

<br>

 

</body>

</html>

 

boboxiaopangde
关注
专栏目录
js+css实现切换选项卡代码
10-16
本文将详细介绍如何使用JavaScript（js）和层叠样式表（css）来实现一个简单的选项卡切换功能，并通过分析`demo.html`文件来展示具体的实现步骤。 首先，我们需要在HTML文件中创建基本的结构。一个典型的选项卡布局...
简单复古的js选项卡切换样式代码
11-22
本文将详细解析"简单复古的js选项卡切换样式代码"这一主题，探讨如何使用JavaScript实现这种效果。 首先，我们要理解选项卡的基本结构。一个典型的选项卡布局包括两部分：选项卡（tab）和内容面板（content panel）...
简易选项卡代码源码
aew2128的博客
12-23 270
今天来分享一个简易选项卡代码效果，先来看看最后的效果图。 html部分： <div id="outer"> <ul id="tab"> <li class="current">第一课</li> <li>第二课</li> &lt...
php选项卡切换,基于javascript实现最简单选项卡切换
weixin_30320587的博客
03-10 169
本文教大家用原生js实现的最简单选项卡切换效果，鼠标滑过，对应的隐藏部分显示，并且样式发生改变。代码最简洁，js行为优化版，复制粘贴即可使用。javascript-实现最简易选项卡body,ul,li{margin:0;padding:0;}body{font:12px/1.5 Tahoma;}#outer{width:450px;margin:10px auto;}#tab{overflow:h...
js实现选项卡功能
TheFoma的专栏
04-15 710
标题是用无序列表，内容放在div里，内容div里面使用无序列表； 实现逻辑： 1.通过dom操作找到标题里的li；需要给他添加onmouseover事件； 2.给触发了onmouseover事件的li设置效果 3.通过dom操作找到内容里的ul,当触发onmouseover 事件的时候给ul添加display属性； 注意事项：需要使用this关键字，在添加onmouse事件时，需要给
javascript实现-最简单选项卡切换
YangJack-前端开发
01-30 1180
以下是用原生js实现的最简单选项卡切换效果。 鼠标滑过，对应的隐藏部分显示，并且样式发生改变。 代码最简洁，js行为优化版，复制粘贴即可使用。 ** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript-实现最简易选项卡</title> <style> body,ul,li{margi
原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
whiteGay的博客
10-14 898
在制作网页过程中，我们可能会遇到各种常用的经典网页特效，比如Banner图片滚动、选项卡循环播放、右下角广告弹窗、评论提交展示、选项动态增删、剪刀石头布小游戏等等等。。。是不是感觉都...
MUI底部选项卡链接跳转不了
weixin_42009735的博客
01-28 651
问题描述： 用MUI例子中的选项卡，底部的导航只能实现div切换，链接无法跳转。 查看控制台，输出：Unable to preventDefault inside passive event listener due to target 的警告。 问题解决： 经检查相关资料，加入以下代码，即可解决问题。 mui(‘body’).on(‘tap’,‘a’,function(){document.lo...
Odoo代码规范
m0_62065137的博客
04-25 926
id属性放在model属性前字段(field)定义中，name属性放在第一个。然后，将值放在标签内，或者放在eval属性中。最后将其他属性（widget、options...）按重要性排序。尝试按模型对记录进行分组。如果操作/菜单/视图之间存在依赖关系，则此约定可能不适用。标签仅用于设置不可更新的数据如果整个xml文件都是不可更新数据，则noupdate=1属性可以设置在标签上，而不需要标签。
全面解析Tab选项卡设计与实现
最新发布
weixin_29069575的博客
09-29 1098
本文还有配套的精品资源，点击获取 简介：Tab选项卡是用户界面设计中常见的元素，用于组织和展示信息，提升用户体验。本课程深入讲解Tab选项卡的设计原则、功能以及在Web端、移动端和桌面应用中的实现方法。同时，探讨Tab选项卡的扩展与创新，如动态加载、混合式布局和自定义交互，以适应技术的发展和用户需求。掌握Tab选项卡的设计与实现，将极大提高软件和网站的用户导航体验。 ...
分析选项卡底部内凹圆角制作
weixin_33728268的博客
09-26 632
2019独角兽企业重金招聘Python工程师标准>>> ...
移动端原生js选项卡
11-22
一个典型的选项卡组件包括两部分：标签（tab）和内容区域（content）。标签是用户点击的可视元素，通常显示为文字或图标，而内容区域则包含与每个标签相关联的具体信息。在HTML中，我们可以使用`<ul>`和`<li>`元素...
基于jquery的淡入淡出选项卡效果代码
10-29
描述中提到的“经典的Tab选项卡代码，淡入淡出，jquery插件版”，指的是这是一种基于jQuery的插件实现，可能是一个预先封装好的功能模块，方便开发者快速集成到自己的项目中。它具有典型的选项卡布局，通过淡入淡出...
从126邮箱提取的选项卡tab特效代码.rar
07-05
【标签】"JS特效-选项卡TAB" 指出这个代码主要依赖JavaScript语言来实现，特别是涉及到DOM操作和事件处理的部分。JavaScript是一种广泛用于网页动态效果的编程语言，能够使网页具有交互性。选项卡（Tab）功能是...
取消浏览器页面字符编码的自动选择后IE不能自动识别网页编码的问题解决
07-12 2866
问题情况：用dreamweaver编写的页面，页面编码为utf-8格式，head中的声明设置为meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ，页面字符编码为utf-8，浏览器页面字符编码取
哀悼日网页变灰色的CSS代码【IE、firefox】
07-25 2262
简介：实现哀悼日网页变灰色的CSS代码【IE、firefox】. 【 IE 】为方便站点哀悼,添加css滤镜代码,以表哀悼.以下为全站CSS代码.html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscal
ie6的双边距问题和firefox的浮动块间距问题
11-20 1529
【一】ie6的双边距只要满足下面3个条件才会出现这个BUG: 1）要为块状元素；2）要左侧浮动；3）要有左外边距(margin-left)；(float:left   margin-left)  (float:right  margin-right)解决这个BUG很容易，只需要在相应的块状元素的CSS树形中加入“display:inline;”或添加*html{margin-left:...px;}，添加的做外边距缩小一半就可以了。【二】在ff中如果两个块级元素要排在同一行，需要使用float来解决。在ie
js实现浮动层飘出浏览器
12-25 453
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb
jQuery品牌logo列表选项卡切换实现教程
选项卡切换就是一种典型的前端交互设计，它通过直观的视觉反馈帮助用户理解内容的组织结构。 6. 文件压缩与解压: 文件压缩是一种减少文件大小的方法，便于存储和传输。本资源文件通过ZIP格式进行压缩，用户在使用前...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值