[html]选项卡效果
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<style type="text/css">
.menu{background:#eee; border-bottom:1px solid #0f52a4;}
a{
display:inline-block;
width:100px;
height:36px;
line-height:36px;
text-align:center;
color: #0f52a4;
font-weight: bold;
text-decoration: none;
position:relative;
top:1px;
}
.current a{
background:#fff;
border-top:2px solid #0f52a4;
}
div div{
display:none;
border-bottom:1px solid #0f52a4;
}
</style>
<script type="text/javascript">
$(function(){
$('div div:first').show();
$('span').mouseenter(function(){
$('span').removeClass('current');
$(this).addClass('current');
$('div div').hide();
$('div div').eq($('span').index(this)).show();
});
});
</script>
</head>
<body>
<div class="menu">
<span class="current"><a href="#">晨间新闻</a></span>
<span><a href="#">午间新闻</a></span>
<span><a href="#">晚间新闻</a></span>
<span><a href="#">视频新闻</a></span>
</div>
<div>
<div>晨间新闻</div>
<div>午间新闻</div>
<div>晚间新闻</div>
<div>视频新闻</div>
</div>
</body>
</html>
本文内容参考：http://h-ui.net/Hui-4.5-tab.shtml
[html]选项卡效果的更多相关文章
- Javascript进阶篇——总结--DOM案例+选项卡效果
断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 ...
- Vue 框架-06-条件语句 v-if 实现选项卡效果
Vue 框架-06-条件语句 v-if 实现选项卡效果 本片介绍的是 Vue 中条件语句 v-if 第一个小实例是,通过 v-if="布尔值",通过布尔值的真假来决定,某元素是否显 ...
- CSS3及JS简单实现选项卡效果（适配手机端和pc端）
想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...
- 微信小程序实例：实现tabs选项卡效果
最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已 ...
- WPF实现选项卡效果（2）——动态添加AvalonDock选项卡
原文:WPF实现选项卡效果(2)--动态添加AvalonDock选项卡 简介 在前面一篇文章里面,我们使用AvalonDock实现了类似于VS的选项卡(或者浏览器的选项卡)效果.但是我们是通过xaml ...
- WPF实现选项卡效果（3）——自定义动态添加的AvalonDock选项卡内容
原文:WPF实现选项卡效果(3)--自定义动态添加的AvalonDock选项卡内容 简介 在前面一篇文章里面,我们实现了AvalonDock选项卡的动态添加,但是对于选项卡里面的内容,我们并没有实现任 ...
- WPF实现选项卡效果（1）——使用AvalonDock
原文:WPF实现选项卡效果(1)--使用AvalonDock 简介 公司最近一个项目,软件采用WPF开发,需要实现类似于VS的选项卡(或者是浏览器的选项卡)效果.搜寻诸多资料后,发现很多同仁推荐Ava ...
- 用js和css实现选项卡效果+jq(2019-10-09)
1效果图: 2代码: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- ecshop 实现“精品、新品、热销”板块出现选项卡效果的方法
最近做一个网络商城,直接使用ecshop的免费模板,懒得重新做,ecshop建站多日了,一直想在主页的板块中建网页选项卡鼠标经过自动切换效果,百度搜索这方面的内容也没找到合适的,今天一实验,成功了,所 ...
- 简单的jquery选项卡效果
html部分 <ul class="tab"> <li>最新</li> <li class="cur">热门&l ...
随机推荐
- 你所不了解的setTimeout
看到了一篇不错的文章<你会用setTimeout吗 >,转载过来的,改了个名字,一下子感觉搞大上了,嘎嘎. 加了几个关于 setTimeout 和setInterval的小知识: 关于se ...
- Java学习总结（二）----Java语言基础
1. Java语言基础 2.1 关键字 定义:被java语言赋予特殊含义的单词 特点:关键字中的字母都为小写 用于定义数据类型的关键字 class,interface,byte,short,i ...
- nginx location各种修饰符的匹配优先级
这作为一个备份,方便查询,毕竟nginx的强大,必然有其复杂性! Location modifier Nginx allows you to define location blocks by spe ...
- 如何成为一名合格甚至优秀的个人草根站长（转载自ChinaZ）
这章本来不想写来的,后来琢磨琢磨还是废话一下吧.主要是想说下现在草根站长的状态和如何成为一名合格的甚至优秀的草站站长. 伟大的草根站长们,在某些媒体的超级忽悠下全来到网络上淘金来了,有在校的大学生,有 ...
- 【freemaker】之获取xml的值
测试代码 @Test public void test09() throws Exception{ root.put("doc", NodeModel.parse(new Inpu ...
- FreeMarker模板引擎
现在开发的项目,也是基于SOA架构,每个功能接口都是用WebService实现,Web服务的通信协议就是用XML来传输. 以前写WebService都是自动生成XML,没想到这项目竟然要自己定义XML ...
- （转）JPEG图片数据结构分析- 附Png数据格式详解.doc
一.简述 JPEG是一个压缩标准,又可分为标准JPEG.渐进式JPEG及JPEG2000三种: ①标准JPEG:以24位颜色存储单个光栅图像,是与平台无关的格式,支持最高级别的压缩,不过,这种压 ...
- java堆内存和栈内存的处理
前段时间学习二叉树在处理删除操作的时候遇到一个头疼的问题:删除节点的时候明明已经置null了可树上该节点依旧存在,还必须执行node.father.left = null;才可以删除node节点,寻找 ...
- day01-0２--数据库概念介绍
什么是数据库呢?是存放数据的仓库.这个仓库比较特殊--它是按照一定的数据结构来组织.存储的.当然,我们也需要管理仓库中的货物--我们通过数据库提供的多种方法来管理数据库里的数据. 来自为知笔记(Wiz ...
- 关于Excel导入导出的用例设计
目前,为方便操作,很多系统都会增加批量导入导出的功能.文件导入导出一般格式都是excel.由于用户直接在excel在填写内容,无法控制填写的格 式,加上excel解析比较困难,所以一般涉及到excel ...