<!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]选项卡效果的更多相关文章

  1. Javascript进阶篇——总结--DOM案例+选项卡效果

    断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 ...

  2. Vue 框架-06-条件语句 v-if 实现选项卡效果

    Vue 框架-06-条件语句 v-if 实现选项卡效果 本片介绍的是 Vue 中条件语句 v-if 第一个小实例是,通过 v-if="布尔值",通过布尔值的真假来决定,某元素是否显 ...

  3. CSS3及JS简单实现选项卡效果（适配手机端和pc端）

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  4. 微信小程序实例：实现tabs选项卡效果

    最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已 ...

  5. WPF实现选项卡效果（2）——动态添加AvalonDock选项卡

    原文:WPF实现选项卡效果(2)--动态添加AvalonDock选项卡 简介 在前面一篇文章里面,我们使用AvalonDock实现了类似于VS的选项卡(或者浏览器的选项卡)效果.但是我们是通过xaml ...

  6. WPF实现选项卡效果（3）——自定义动态添加的AvalonDock选项卡内容

    原文:WPF实现选项卡效果(3)--自定义动态添加的AvalonDock选项卡内容 简介 在前面一篇文章里面,我们实现了AvalonDock选项卡的动态添加,但是对于选项卡里面的内容,我们并没有实现任 ...

  7. WPF实现选项卡效果（1）——使用AvalonDock

    原文:WPF实现选项卡效果(1)--使用AvalonDock 简介 公司最近一个项目,软件采用WPF开发,需要实现类似于VS的选项卡(或者是浏览器的选项卡)效果.搜寻诸多资料后,发现很多同仁推荐Ava ...

  8. 用js和css实现选项卡效果+jq(2019-10-09)

    1效果图: 2代码: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  9. ecshop 实现“精品、新品、热销”板块出现选项卡效果的方法

    最近做一个网络商城,直接使用ecshop的免费模板,懒得重新做,ecshop建站多日了,一直想在主页的板块中建网页选项卡鼠标经过自动切换效果,百度搜索这方面的内容也没找到合适的,今天一实验,成功了,所 ...

  10. 简单的jquery选项卡效果

    html部分 <ul class="tab"> <li>最新</li> <li class="cur">热门&l ...

随机推荐

  1. osx 文本编辑工具下载地址Sublime Text 3

    下载地址: http://www.sublimetext.com/3 Sublime Text 是一个代码编辑器(Sublime Text 3是收费软件,但可以无限期试用),也是HTML和散文先进的文 ...

  2. SQL Server DBA日常查询视图_数据库对象视图

    1.数据库 use master; exec sp_helpdb 1.1查询数据库大小 1.2查询数据库状态 use msdb select name, user_access_desc, --用户访 ...

  3. POST内容太大的问题

    背景: 最近项目进入尾声,需要做交付测试,发现CMS生成页面在反复修改保存多次后,由于页面存在动态加载js的缘故,使得页面的内容越来越大,最终出现页面没有办法保存(ajax post将页面的内容发送给 ...

  4. Python Queue队列

    queue is especially useful in threaded programming when information must be exchanged safely between ...

  5. 修改mongodb3.0副本集用户密码遇到的坑

    最近公司对项目安全方面的问题很是重视,进行了多次各种安全漏洞的扫描,于是乎就扫到了mongodb弱口令的问题. 在项目部署初期,因为大家对这个都不是特别重视,大概是因为觉得反正是内网项目吧,所以mon ...

  6. [HTML5]a标签禁止嵌套使用

    a标签内部不可再写a标签,否则会与父a标签解析到同一级.

  7. 在ios8中做的屏幕旋转功能

    http://www.cnblogs.com/smileEvday/archive/2013/04/24/Rotate2.html 思路出自这篇博主的文章. 直接上代码 -(void)willAnim ...

  8. HDU 4135 Co-prime(容斥原理)

    Co-prime 第一发容斥,感觉挺有意思的 →_→ [题目链接]Co-prime [题目类型]容斥 &题意: 求(a,b)区间内,与n互质的数的个数. \(a,b\leq 10^{15}\) ...

  9. MyBatis无法根据中文条件查询出结果

    情况是这样的 , 以英文做参数可以查询到结果 , 以中文做参数则查询不到结果 在mysql workbench中执行sql , 可以查询到结果. 这是mybatis中没有指定utf-8的缘故导致的. ...

  10. mysql 数据库乱码解决

    mysql 数据库乱码解决, 进入前加入 set names 'utf8'  即可.