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

2019-11-20 09:15:19

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

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

上一篇：JS中script标签defer和async属性的区别详解

下一篇：很实用的js选项卡切换效果