您的位置：首页 > 其它

显示全部内容OR显示部分内容

2014-02-26 13:31 411 查看

效果图：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="显示全部品牌.aspx.cs" Inherits="显示全部品牌" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

<script src="Scripts/jquery-1.7.1.js" type ="text/javascript" ></script>

<script type ="text/javascript" >

//等待DOM加载完毕

$(function () {

//获得索引值大于5的品牌集合对象（除最后一条）

var $category = $('ul li:gt(5):not(:last)');

//以藏上面获取到的jQuery对象

$category.hide();

//获取‘显示全部品牌’按钮

var $toggleBth = $('div.showmore>a');

//给按钮添加click事件

$toggleBth.click(function () {

//如果元素显示

if ($category.is(":visible")) {

//隐藏$category

$category.hide();

//改变背景图片和文本

$(this).find('span')

//.css("background", "url(img/down.gif)no-repeat 0 0")

.text("显示全部品牌");

//去掉高亮样式

$('ul li').removeClass("promoted");

}

else {

//显示$category

$category.show();

//改变背景图片和文本

$(this).find('span')

//.css("background", "url(img/up.gif)no-repeat 0 0")

.text("精简显示品牌");

//添加高亮样式

$('ul li').filter(":contains('佳能').:contains('尼康').:contains('奥林巴斯')")

.addClass("promoted");

}

//超链接不跳转

return false;

})

})

</script>

</head>

<body>

<form id="form1" runat="server">

<div class=" SubCategoryBox">

<ul>

<li><a href="#" >佳能</a><i>(30440)</i> </li>

<li><a href="#" >索尼</a><i>(27220)</i> </li>

<li><a href="#" >三星</a><i>(20808)</i> </li>

<li><a href="#" >尼康</a><i>(17821)</i> </li>

<li><a href="#" >松下</a><i>(12289)</i> </li>

<li><a href="#" >卡西欧</a><i>(8242)</i> </li>

<li><a href="#" >富士</a><i>(14894)</i> </li>

<li><a href="#" >柯达</a><i>(9520)</i> </li>

<li><a href="#" >宾得</a><i>(2195)</i> </li>

<li><a href="#" >理光</a><i>(4114)</i> </li>

<li><a href="#" >奥林巴斯</a><i>(12205)</i> </li>

<li><a href="#" >明基</a><i>(1466)</i> </li>

<li><a href="#" >爱国者</a><i>(3091)</i> </li>

<li><a href="#" >其他品牌相机</a><i>(7275)</i> </li>

</ul>

<div class="showmore">

<a href ="more.html"><span>显示全部品牌</span></a>

</div>

</div>

</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航