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>

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

赞 (0)

相关推荐

  • jQuery+CSS实现滑动的标签分栏切换效果

    jQuery+CSS实现滑动的标签分栏切换效果

    本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果.分享给大家供大家参考.具体如下: 运行代码如下 具体代码如下 <html> <head> <title>jQuery平滑滚动的标签分栏切换</title> <meta charset="gb2312"> <style> ul,li{ margin:0px; padding:0px; list-style:none } li{ float:left; back

  • jQuery版Tab标签切换

    jQuery版Tab标签切换

    鼠标移入Tab的时候会有一定的延时才会切换到相应的项,防止用户不经意的鼠标操作,点击相应的项也可以切换 效果图: 源代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3

  • JQuery页面图片切换和新闻列表滚动效果的具体实现

    JQuery页面图片切换和新闻列表滚动效果的具体实现

    最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"&g

  • jQuery实现平滑滚动的标签分栏切换效果

    jQuery实现平滑滚动的标签分栏切换效果

    本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果.分享给大家供大家参考.具体如下: 这是一款老外的作品,后半部分的代码有点乱,具体就不细整理了,喜欢的朋友自己拷贝代码慢慢整理一下吧,呵呵,虽乱但功能不乱,预览看效果吧,很不错的标签滚动切换. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-bq-menu-cha-style-codes/ 具体代码如下: <!DOCTYPE html> <head&g

  • jQuery实现带延迟的二级tab切换下拉列表效果

    jQuery实现带延迟的二级tab切换下拉列表效果

    本文实例讲述了jQuery实现带延迟的二级tab切换下拉列表效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现带延时效果的下拉列表菜单,有动画效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-delay-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q

  • 基于jquery的tab切换 js原理

    基于jquery的tab切换 js原理

    html代码: 复制代码 代码如下: <div class="details"> <ul class="tab"><li class="on" rel="a1"><b>个人资料</b></li><li rel="a2"><b>帐号维护</b></li><li rel="a3

  • 基于jquery的图片轮播 tab切换组件

    目前只添加了scroll和none的效果,scroll即滑动的效果,可以支持x和y方向的滑动:none就是没有任何效果,只是显示和隐藏,后续需要添加其他效果再做扩展,写的有点水,呵呵,在此留笔,防止丢失. Demo Address:http://demo.jb51.net/js/2012/sinaapp/ 复制代码 代码如下: /** * 巨无霸轮播 */ $.fn.loopSlider = function(option) { var setting = { // 默认显示的顺序 initIn

  • jquery-easyui关闭tab自动切换到前一个tab

    复制代码 代码如下: var lastTabs = new Array(); $(function() { /* * cdh 2010.0630 补充,用于 退回上次标签页 */ $('#mainTabs').tabs({ onSelect: function(tt) { //移除 tt lastTabs = $.grep(lastTabs, function(n, i) { return n != tt; }); //重新压入,保证 最新的在最上面 lastTabs.push(tt); //更

  • 使用jquery实现div的tab切换实例代码

    jQuery实现Tab切换 接触jQ不久以前的js代码来写的简单效果现在用jQ来写: HTML代码: 复制代码 代码如下: <div id="sidebar-tab"> <div id="tab-title"> <h3><span class="selected">最新评论</span><span>近期热评</span><span>随机文章</s

  • JQuery学习笔记 实现图片翻转效果和TAB标签切换效果第1/2页

    所以自己也下了一个来学习,把之前写的几个JS代码都转换成JQuery,既能保证代码的清晰,也保证了代码的通用性,真是一举两得啊,由于是初学者,所以代码有许多的不足,还请大家多多指正:)1.实现图片翻转效果,DW本身提供了这个功能,不过还是自己写的好用,呵呵.之前写的方式比较麻烦,代码也比较乱,用JQuery改造后可以使其更加清晰,核心代码如下: JS代码 复制代码 代码如下: <script type="text/javascript"> <!-- $(documen

随机推荐