JavaScript实现多栏目切换效果


Posted in Javascript onDecember 12, 2016

在网站开发中尤其是新闻类网站,经常遇到多栏目切换的设计,这种效果有很多种实现效果,现在记录一种很简单的写法:

JavaScript实现多栏目切换效果

<style>
 .news_wrap{
  width: 380px;
  height: 266px;
  float: left;
  margin-left: 15px;
 }
 .news_head{
  width: 380px;
  border-bottom: 2px solid #dedede;
  height: 51px;
  line-height: 51px;
 }
 .tabList ul li{
 float: left;
 cursor: pointer;
 font-weight: bold;
 text-align: center;
 font-size: 16px;
 width: 72px;
 }
 .cli1{
 color: #3a7aaf;
 border-bottom: 2px solid #3a7aaf;
 }
 .more{
 font-size: 14px;
 color: #9a9a9a;
 float: right;
 font-weight: normal;
 padding-right: 0;
 }
 .tabCon{
 width: 376px;
 padding-top: 13px;
 overflow: hidden;
 }
 </style>
 <div class="news_wrap">
 <div class="news_head">
  <div class="tabList">
  <ul>
   <li class="cli1" id="p1" onmouseover="return swap_tab(1)" >工作动态</li>
   <li class="cli2" id="p2" onmouseover="return swap_tab(2)" >媒体链接</li>
   <li class="cli2" id="p3" onmouseover="return swap_tab(3)" >领导活动</li>
  </ul>
  </div>
  <div class="more">
  <div id="j1">工作动态_more</div>
  <div id="j2" style="display:none;">媒体链接_more</div>
  <div id="j3" style="display:none;">领导活动_more </div>
  </div>
 </div>
 <div class="tabCon">
  <div id="n1">
  <li>工作动态_list</li>
  <li>工作动态_list</li>
  <li>工作动态_list</li>
  </div>
  <div id="n2" style="display:none;">
  <li>媒体链接_list </li>
  <li>媒体链接_list </li>
  <li>媒体链接_list </li>
  </div>
  <div id="n3" style="display:none;">
  <li>领导活动_list </li>
  <li>领导活动_list </li>
  <li>领导活动_list </li>
  </div>
 </div>
 </div>
<script>
 function swap_tab(n){ //鼠标触发事件
 for(var i=1;i<4;i++){
  var curC=document.getElementById("n"+i);
  var curB=document.getElementById("p"+i);
  var mores = document.getElementById("j"+i);   
  if(n==i){
   curC.style.display="block";
   curB.className="cli1";
   mores.style.display = "block";
  }
  else{
   curC.style.display="none";
   curB.className="cli2";
   mores.style.display = "none";   
  }
 }
}
</script>

以上所述是小编给大家介绍的JavaScript实现多栏目切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 #Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 #Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 #Javascript
AngularJS封装指令方法详解
Dec 12 #Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 #Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 #Javascript
jQuery Ajax File Upload实例源码
Dec 12 #Javascript
You might like
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
python快速查找算法应用实例
2014/09/26 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python频繁写入文件时提速的方法
2019/06/26 Python
django基础学习之send_mail功能
2019/08/07 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
志愿者服务感言
2014/02/27 职场文书
百年校庆节目主持词
2014/03/27 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
教师批评与自我批评
2014/10/15 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
nginx访问报403错误的几种情况详解
2022/07/23 Servers