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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
JS常用正则表达式总结
Nov 12 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 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.MVC的模板标签系统(二)
2006/09/05 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
python代码实现图书管理系统
2020/11/30 Python
python 基于opencv实现图像增强
2020/12/23 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
请解释流与文件有什么不同
2016/07/29 面试题
毕业生的自我鉴定
2013/10/29 职场文书
财务管理个人自荐书范文
2013/11/24 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
2014年环保局工作总结
2014/12/11 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
个人业务学习心得体会
2016/01/25 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫