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 函数使用说明
Apr 07 Javascript
jQuery bind事件使用详解
May 05 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
JS实现的几个常用算法
Nov 12 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 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
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
详解Vue.js中.native修饰符
2018/04/24 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python元组知识点总结
2019/02/18 Python
python redis 删除key脚本的实例
2019/02/19 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
美国折扣网站:jClub
2017/08/07 全球购物
学历公证书范本
2014/04/09 职场文书
简历自荐信范文
2015/03/09 职场文书
地雷战观后感
2015/06/09 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis