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 相关文章推荐
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 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
WHOIS类的修改版
2006/10/09 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
详解python 中in 的 用法
2019/12/12 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
大学生简单自荐信
2013/11/10 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
母亲节感言
2015/08/03 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
PyTorch 如何自动计算梯度
2021/05/23 Python
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL