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

更新时间：2016年08月12日 11:14:14 作者：回忆没了焦点

这篇文章主要为大家详细介绍了jquery实现网站列表切换效果的2种方法，供大家参考，感兴趣的小伙伴们可以参考一下

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

效果图：

<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

jqPlot Option配置对象详解
如果看过本文姊妹篇《jqPlot——基于jquery的图表绘制工具》的朋友，应该知道jqPlot大致的操作方法；如果还是不太清楚的话，可以参考jqPlot官方网站的使用方法介绍。
2009-07-07
jquery标签选择器应用示例详解
这篇文章主要为大家详细介绍了jquery标签选择器应用示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
这篇文章主要介绍了jQuery插件zTree实现清空选中第一个节点所有子节点的方法,涉及jQuery树形插件zTree针对节点的遍历与移除相关操作技巧,需要的朋友可以参考下
2017-03-03
开发中可能会用到的jQuery小技巧
这篇文章主要介绍了开发中可能会用到的几个jQuery小提示和技巧,需要的朋友可以参考下
2014-03-03
js实现的黑背景灰色二级导航菜单效果代码
这篇文章主要介绍了js实现的黑背景灰色二级导航菜单效果代码,涉及javascript操作页面元素动态切换的实现技巧,非常具有实用价值,需要的朋友可以参考下
2015-08-08
jQuery实现给页面换肤的方法
这篇文章主要介绍了jQuery实现给页面换肤的方法,涉及jQuery页面元素的选择与样式的操作,需要的朋友可以参考下
2015-05-05
jQuery使用$.ajax进行即时验证实例详解
这篇文章主要介绍了jQuery使用$.ajax进行即时验证的方法,以完整实例形式较为详细的分析了jQuery前台控制ajax交互与后台asp.net响应处理的详细实现技巧,需要的朋友可以参考下
2015-12-12
Jquery选中或取消radio示例
选中或取消radio在项目中也会经常用到，下面是用jquery实现radio的选中或取消，感兴趣的朋友可以参考下
2013-09-09
jQuery内置的AJAX功能和JSON的使用实例
通过jQuery内置的AJAX功能，访问后台获得JSON格式的数据，然后通过jQuer把数据直接在页面上显示,需要的朋友可以参考下
2014-07-07
jQuery实现炫酷的鼠标轨迹特效
本文给大家分享的是一段jQuery实现炫酷的鼠标轨迹的特效代码，希望小伙伴们能够喜欢。
2015-02-02