css+js的选项卡效果

最新推荐文章于 2024-04-24 10:02:53 发布
最新推荐文章于 2024-04-24 10:02:53 发布
阅读量599 收藏
点赞数
分类专栏： html 文章标签： js css 选项卡
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html lang="us-en">
<head>
<title>css选项卡(html组件)</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content=" "/>
<meta name="description" content="" />
<style type="text/css">
div.card div{ background-color:#FF8000; float:left;  padding:1px; padding-bottom:0; clear:both; width:405px;}
div.card a{ color:black; font-size:14px; text-decoration:none;  float:left; width:100px; text-align:center; background-color:white; margin-right:1px;}
div.card div.home a.home{ font:normal normal bold 14px/1.5 宋体;}
div.card div.international a.international { font:normal normal bold 14px/1.5 宋体;}
div.card div.sport a.sport{ font:normal normal bold 14px/1.5 宋体;}
div.card div.finance a.finance{ font:normal normal bold 14px/1.5 宋体;}
div.card div.content{ background-color:white; border:1px solid #ff8000; height:100px;}
</style>
<script type="text/javascript">
var shq={}
shq.cmenu=function(e)
{
var e=window.event?window.event.srcElement:e.target;
        if(/a/i.test(e.tagName)){
        e.parentNode.className=e.className;
        e.parentNode.nextSibling.innerHTML=e.innerHTML;
        e.parentNode.nextSibling.style.cssText='border-top:none';
        e.blur();
        }
}
</script>
</head>
<body>
<div class="card">
<div οnclick="shq.cmenu(event)">
<a href="#" class="home">国内</a>
<a href="#" class="international">国际</a>
<a href="#" class="sport">体育</a>
<a href="#" class="finance">财经</a>
</div><div class="content"></div>
</div>

<div class="card">
<div οnclick="shq.cmenu(event)">
<a href="#" class="home">国内</a>
<a href="#" class="international">国际</a>
<a href="#" class="sport">体育</a>
<a href="#" class="finance">财经</a>
</div><div class="content"></div>
</div>

<div class="card">
<div οnclick="shq.cmenu(event)">
<a href="#" class="home">国内</a>
<a href="#" class="international">国际</a>
<a href="#" class="sport">体育</a>
<a href="#" class="finance">财经</a>
</div><div class="content"></div>
</div>
</body>
</html><script language="Javascript">
var now = new Date();
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript>
五彩的瓜牛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css+js实现的网页常见选项卡效果
01-21
复制代码代码如下: <...css选项卡(html组件)</title> <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” /> <meta http-equiv=”content-type” content=”te
html选项卡式导航_选项卡式导航：动态添加CSS类
Web design 教程小屋
07-09 1582
我爱制表符，只要它们存在我就做了！ 让我们看看是否可以利用一些javascript和CSS3功能来构建出色的选项卡式导航。 我们将使用javascript自动检测访问者当前所在的标签，甚至使其与IE6兼容。 CSS3pie万岁！ 步骤1：HTML <head> 容易的部分 因为我们希望页面与IE 6-8兼容，所以我们使用“ HTML-4.01 Transitiona...
html的选项卡切换,纯css选项卡切换
weixin_33740713的博客
06-03 225
HtmlCssJs纯CSS制作的TBA选项卡2.0头条[热议]GalaxyS8成最值期待的新机[实用]魅族5s30分钟充电56%[划算]爆款9.9元秒杀还包邮[时尚]摩拜单车真的不如ofo？公告[时尚]摩拜单车真的不如ofo？[热议]GalaxyS8成最值期待的新机[实用]魅族5s30分钟充电56%[划算]爆款9.9元秒杀还包邮足球[实用]魅族5s30分钟充电56%[划算]爆款9.9元秒杀还包邮[...
前端：JS/30/综合实例：选项卡（HTML，CSS，JS）
Java_53的博客
05-15 197
综合实例：选项卡（HTML，CSS，JS） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS综合实例_选项卡_HTML_CSS_JS</title> &lt
HTML+JS+CSS选项卡效果[搜集整理]
yangsong158的专栏
10-09 4900
1.模仿Windows选项卡 var Num=4; //这里是增加选项卡的数目var carNum=2+Numfunction document.onselectstart(){ var obj=event.srcElement if(obj.tagName=="SPAN"){ return false; }}function doc
用html+css+js实现选项卡切换效果
weixin_34240520的博客
12-24 220
window.onload = function () { chang(); var myTab = document.getElementById("gameDevelopment"); //整个div var myUl = myTab.getElementsByTagName("ul")[0];//一个节点 var myLi = myUl.getElementsBy...
javascript+css 新闻显示tab 选项卡效果
10-30
跟新浪的比较像啊，tab切换效果，门户类网站用过的，大家可以看看。
CSS+JS常用网页选项卡打包
05-12
内容索引:脚本资源,CSS特效,网页选项卡演示,滑动门特效代码　老外的作品，集中了几十种常见的网页选项卡，还包括有滑动门效果，含有丰富的实例演示，很值得收藏哦。。
CSS+JS选项卡式导航菜单
03-18
NULL 博文链接：https://gucy.iteye.com/blog/656366
[前端] html+css+javascript 实现选项卡切换效果
热门推荐
童凌的技术博客
03-28 4万+
用html+css+js实现选项卡切换效果使用之前学过的综合知识，实现一些新闻门户网站上的常见选项卡效果：文字素材: 房产： 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简
HTML+CSS+JS实现选项卡
凌晨1点21分的专栏
03-04 756
今天学习的时候写一个选项卡，献上代码和截图
前端面试试题
wsq_5211314
01-30 1000
1.一个200*200的div在不同分辨率屏幕上下左右居中，用css实现 div { position:absolute; width:200px; height:200px; top:50%; left:50%; margin-left:-100px; height:-100px; z-index:1000; } 2.阐述清楚浮动的几种方式（常见问题） 1.父级div定义 height 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 优点：简单、代码少、容易..
1. Tailwind CSS 简介
一名全栈开发工程师
04-21 459
Tailwind CSS 是一个高度可定制的、实用的 CSS 框架，它提供了一套丰富的工具类，使得开发者可以快速地构建现代化的用户界面。
CSS显示模式
小何代码咖啡馆
04-18 968
元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，比如一行可以放多个。当网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局网页。
css中设置元素大小的属性block-size
qwguo
04-18 488
的逻辑组合，允许你同时设置元素的最小和最大高度。这些属性旨在让布局不再依赖于传统的物理方向（如上下左右），而是基于逻辑方向（如开始、结束、之前、之后）。这有助于在水平和垂直方向都能更好地控制布局，特别是在多语言环境中，其中文本可能从右到左或从下到上流动。因此，在使用此属性时，建议查阅最新的 CSS 规范并测试不同浏览器的兼容性。属性一起使用，以控制元素的盒模型（包括内容、内边距和边框）如何计算其总大小。是 CSS 中的一个属性，它用于设置元素的块级尺寸（即元素的高度）。
CSS基础——2.CSS选择器
最新发布
weixin_66370632的博客
04-24 954
1. 通用选择器 通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素,开发中通常使用通用选择器来清除 HTML元素中默认的内外边距
CSS简介与CSS选择器
小何代码咖啡馆
04-17 975
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言，CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
PostCSS概述
积跬步以致千里，积怠惰以致深渊
04-18 355
PostCSS拥有一个庞大而活跃的插件生态系统，涵盖了各种各样的功能，如自动添加浏览器前缀、转换最新的CSS语法、优化CSS代码等。它的设计目标是通过模块化、可组合的插件系统来解决CSS预处理器的一些局限性，并且使得CSS的处理更加高效、灵活和可靠。：PostCSS的处理流程是模块化的，每个插件只负责完成特定的任务，比如解析CSS、转换样式、优化代码等。总的来说，PostCSS是一个强大而灵活的工具，可以帮助开发者更高效地处理CSS，提高项目的开发效率和代码质量。
css+html+js实现一个响应式的六个横向排版的选项卡，点击选项卡切换背景颜色，每个选项卡上面图片下面文本
05-27
首先，我们需要使用HTML和CSS来创建选项卡的基本结构和样式，然后使用JavaScript来实现选项卡的切换效果。 HTML结构： ```html 选项卡1 选项卡2 选项卡3 选项卡4 选项卡5 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值