jquery实现网站列表切换效果的2种方法


Posted in Javascript onAugust 12, 2016

本文实例为大家分享了jquery实现网站列表切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

效果图:

jquery实现网站列表切换效果的2种方法

<html>
 <head>
  <meta charset="utf-8" />
  <title>网站品牌列表切换效果</title>
  <style>
   *{
    margin: 0px;
    padding: 0px;
   }
   a{
    color: black;
    text-decoration: none;
   }
   a:hover{
    color: brown;
   }
   .box{
    width: 600px;
    min-height:200px ;
    border: 1px solid #ccc;
    margin: 0px auto;
    text-align: center;
    margin-top: 40px;
   }
   .box ul{
    list-style: none;
   }
   .box ul li{
    display: block;
    float: left;
    width: 200px;
    /*line-height: 30px;*/
   }
   .showmore{
    clear: both;
    padding-top: 20px;
   }
   .showmore a{
    border: 1px solid gray;
    padding: 5px 10px;
   }
  </style>
  <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script>
   $(function(){
    var $category= $("ul li:gt(5):not(:last)");
    $category.hide();
    $(".showmore > a").click(function(){
     if($category.is(":visible")){
      $category.hide();
      $(this).find('span').text("? 显示全部品牌");
     }else{
      $category.show();
      $(this).find('span').text("▲ 精简显示品牌");
     }
      
     return false;
    });
     
    //用toggle()方法更简洁实现上边切换功能
//    $(".showmore > a").toggle(function(){
//     $category.show();
//     $(this).find('span').text("▲ 精简显示品牌");
//    },function(){
//     $category.hide();
//     $(this).find('span').text("? 显示全部品牌"); 
//    })
   })
  </script>
 </head>
 <body>
  <div class="box">
   <ul>
    <li><a href="#">索尼<i>(30123)</i></a></li>
    <li><a href="#">佳能<i>(30123)</i></a></li>
    <li><a href="#">康佳<i>(30123)</i></a></li>
    <li><a href="#">小米<i>(30123)</i></a></li>
    <li><a href="#">华为<i>(30123)</i></a></li>
    <li><a href="#">联想<i>(30123)</i></a></li>
    <li><a href="#">vivo<i>(30123)</i></a></li>
    <li><a href="#">中兴<i>(30123)</i></a></li>
    <li><a href="#">苹果<i>(30123)</i></a></li>
    <li><a href="#">三星<i>(30123)</i></a></li>
    <li><a href="#">诺基亚<i>(30123)</i></a></li>
    <li><a href="#">明基<i>(30123)</i></a></li>
    <li><a href="#">爱国者<i>(30123)</i></a></li>
    <li><a href="#">富士<i>(30123)</i></a></li>
    <li><a href="#">松下<i>(30123)</i></a></li>
    <li><a href="#">尼康<i>(30123)</i></a></li>
    <li><a href="#">柯达<i>(30123)</i></a></li>
    <li><a href="#">其他品牌<i>(30123)</i></a></li>
   </ul>
   <div class="showmore">
    <a href="more.html"><span>? 显示全部品牌</span></a>
   </div>
  </div>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
很实用的js选项卡切换效果
Aug 12 #Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 #Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 #Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 #Javascript
JS实现图片剪裁并预览效果
Aug 12 #Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 #Javascript
分享JS数组求和与求最大值的方法
Aug 11 #Javascript
You might like
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
用 JSON 处理缓存
2007/04/27 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
Python字符串逐字符或逐词反转方法
2015/05/21 Python
Python简易版停车管理系统
2019/08/12 Python
Django-migrate报错问题解决方案
2020/04/21 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
介绍一下SQL Server的全文索引
2013/08/15 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
初中成绩单评语
2014/12/29 职场文书
农村老人去世追悼词
2015/06/23 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
MySQL之DML语言
2021/04/05 MySQL