<!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. ajax+php处理案例

    <div> <table> <tr> <th>状态</th> <th>信息</th> </tr> < ...

  2. 12 factor 目录

    I. 基准代码 一份基准代码,多份部署 II. 依赖 显式声明依赖关系 III. 配置 在环境中存储配置 IV. 后端服务 把后端服务当作附加资源 V. 构建,发布,运行 严格分离构建和运行 VI. ...

  3. Oracle11g的delayed failed logins特性引起的性能问题

    用户反映修改密码后程序明显变慢,查看AWR发现: ASH信息如下: 进一步验证: SQL>select event,p1 from v$session t where t.username is ...

  4. mac android studio 编译时报Class JavaLaunchHelper is implemented in both

    Class JavaLaunchHelper is implemented in both /Library/Java/JavaVirtualMachines/jdk1.8.0_25.jdk/Cont ...

  5. IE6与 javascript:void(0)

    遇到过几次这种问题,现在总结一下. 代码: <a onclick="window.location.href='http://www.google.com'" href=&q ...

  6. Win7 远程桌面 错误代码:5 异常处理(您的远程桌面会话即将结束 此计算机的虚拟内存可能不足。请关闭其他程序，然后重试连接远程计算机。如果问题仍然存在，请联系网络管理员或技术支持。)

    问题表现: 在用windows7 远程桌面连接其他电脑时,出现错误提示对话框—-标题为“严重错误(错误代码:5)”,内容为“您的远程桌面会话即将结束 此计算机的虚拟内存可能不足.请关闭其他程序,然后重 ...

  7. 如何测试手机上的SOAP客户端

    周四晚上,服务端和客户端的两个同事因为soap接口的问题争论了起来.服务端的同事认为客户端的同事发给服务端的soap消息的xml结构有问题,少了几个xml节点,导致服务器端解析出错.而客户端的同事认为 ...

  8. 黄聪：Wordpress二级域名共享用户cookie出现错误解决方案及WP的Cookie机制

    在若干年以前,我刚开始折腾Wordpress没多久的时候,就自己摸索过 多个Wordpress网站共享一份数据表的实现方法 .这种看起来好像很高大上的类SSO功能,能够给用户在多个网站之间提供快速.无 ...

  9. [Tex学习]WinEdit 常用软件快捷键

    WinEdit 常用软件快捷键 编辑: Alt+C:在剪贴板原有复制文本后增加新的被选择的文本. Ctrl+Shift+Alt+Right/Left:对选中文本增加或者删除Comment标记. Ctr ...

  10. MRD

    搜索 复制