首先载入jquery库和jSort插件。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jsort.js"></script> 接着我们在#ul放置5个标题,用来排序。#asc_btn用来按标题顺序排序,#desc_btn则按倒序。
<ul id="nav">
<li id="asc_btn">按标题↑</li>
<li id="desc_btn">按标题↓</li>
</ul>
<ul id="ul">
<li> <h3 class="title">1.首页</h3> <p>提供网站模板,网站源码,网页图标,网页特效,中文字体等网页设计素材下载,为广大网友制作网页提供网站素材免费下载参考</p> <p><a href="http://www.sucaihuo,com">点击查看</a></p> </li>
<li> <h3 class="title">2.网站模板</h3> <p>网站模板,网站模板,网站模板下载,免费网站模板,智慧小屋 </p> <p><a href="https://jy.tp.yuanmeng.life/templates">点击查看</a></p> </li>
<li> <h3 class="title">3.网页特效</h3> <p>JS代码频道为网页前端人员提供建站常用的网页特效,包括图片代码、导航菜单、选项卡/滑动门资源、文字特效、表单代码、提示框/浮动层/弹出层等资源</p> <p><a href="https://jy.tp.yuanmeng.life/js">点击查看</a></p> </li>
<li> <h3 class="title">4.网站导航</h3> <p>精选网站以用户为导向,致力于快速为互联网用户提供设计优秀的网站信息,同时肩负着打击虚假网站的职责</p> <p><a href="https://jy.tp.yuanmeng.life/site">点击查看</a></p> </li>
<li> <h3 class="title">5.网站源码</h3> <p>网站源码提供精品pc源码、app源码、wap源码等。</p> <p><a href="https://jy.tp.yuanmeng.life/js">点击查看</a></p> </li>
</ul> $(function() {
$("#asc_btn").click(function() {
$("#ul").jSort({
sort_by: 'h3.title',//指向item内需要排序的元素,默认为p,本例中要排序的是h3.title。
item: 'li',//要排序的内容
order: 'asc' //排序方式,asc-顺序,desc-倒序,默认为asc。
});
});
$("#desc_btn").click(function() {
$("#ul").jSort({
sort_by: 'h3.title',
item: 'li',
order: 'desc'
});
});
});
*
回帖描述:*
链接类型:*
下载链接:*
描述:*
回帖描述:*
链接类型:*
阅读权限:*
下载链接:



聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6
Copyright(C)web.com, All Rights Reserved.
