JS简单实现tab切换效果的多窗口显示功能


Posted in Javascript onSeptember 07, 2016

本文实例讲述了JS简单实现tab切换效果的多窗口显示功能。分享给大家供大家参考,具体如下:

<div style=" text-align:center; margin-top:40px;">
  <div class="menubox">
    <span id="newstab1" class="hover" onmouseover="setTab('newstab',1,3)"> <a href="###" target="_blank">科室新闻</a></span>
    <span id="newstab2" onmouseover="setTab('newstab',2,3)"> <a href="###" target="_blank">媒体报道</a></span>
    <span id="newstab3" onmouseover="setTab('newstab',3,3)"> <a href="###" target="_blank">学术研究</a></span>
  </div>
  <div class="contentbox">
    <div id="con_newstab_1">
      <ul>
        <li><span>2015-09-09</span><a href="###" target="_blank">阅谁问君诵水落清香浮1</a></li>
        <li><span>2015-08-17</span><a href="###" target="_blank">阅谁问君诵水落清香浮1</a></li>
        <li><span>2015-08-05</span><a href="###" target="_blank">阅谁问君诵水落清香浮1</a></li>
      </ul>
    </div>
    <div id="con_newstab_2" style="display:none;">
      <ul>
        <li><span>2015-09-09</span><a href="###" target="_blank">阅谁问君诵水落清香浮2</a></li>
        <li><span>2015-08-17</span><a href="###" target="_blank">阅谁问君诵水落清香浮2</a></li>
        <li><span>2015-08-05</span><a href="###" target="_blank">阅谁问君诵水落清香浮2</a></li>
      </ul>
    </div>
    <div id="con_newstab_3" style="display:none;">
      <ul>
        <li><span>2015-09-09</span><a href="###" target="_blank">阅谁问君诵水落清香浮3</a></li>
        <li><span>2015-08-17</span><a href="###" target="_blank">阅谁问君诵水落清香浮3</a></li>
        <li><span>2015-08-05</span><a href="###" target="_blank">阅谁问君诵水落清香浮3</a></li>
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript">
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>

效果图:

JS简单实现tab切换效果的多窗口显示功能

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
JS实现的幻灯片切换显示效果
Sep 07 #Javascript
javascript宿主对象之window.navigator详解
Sep 07 #Javascript
Angular 理解module和injector,即依赖注入
Sep 07 #Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 #Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 #Javascript
jQuery实现底部浮动窗口效果
Sep 07 #Javascript
聊一聊Vue.js过渡效果
Sep 07 #Javascript
You might like
php文件缓存类汇总
2014/11/21 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
python实现网站的模拟登录
2016/01/04 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
Python反射用法实例简析
2017/12/22 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
Python常用编译器原理及特点解析
2020/03/23 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
使用python实现名片管理系统
2020/06/18 Python
python软件都是免费的吗
2020/06/18 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
信用社竞聘演讲稿
2014/05/16 职场文书
爱护花草树木的标语
2014/06/11 职场文书
活动总结报告怎么写
2014/07/03 职场文书
司机岗位职责
2015/02/04 职场文书
教师求职自荐信
2015/03/26 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
Python first-order-model实现让照片动起来
2022/06/25 Python