首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

JQuery - 第一课 某网站品牌列表简要/全部显示效果的实现

2012-09-02 
JQuery - 第一课 某网站品牌列表精简/全部显示效果的实现JQuery - 第一课 某网站品牌列表精简/全部显示效

JQuery - 第一课 某网站品牌列表精简/全部显示效果的实现

JQuery - 第一课 某网站品牌列表精简/全部显示效果的实现


品牌列表,实现全部显示/精简显示的切换。

?

注意点:

1.思考诸如类似js/ajax的实现的思路,思考路线(思考ajax扩展)。

2.理解javascript基于事件模型的特点

3.理解Jquery常见函数能简化代码的优点

?

?

?

初始,精简显示

JQuery - 第一课 某网站品牌列表简要/全部显示效果的实现

?

单击按钮, 全部显示,并高亮显示推荐品牌

JQuery - 第一课 某网站品牌列表简要/全部显示效果的实现

?

?

实现:

?

1.设计静态HTML样式及内容

?

?

?

$(document).ready(function(){var $category = $('ul li:gt(5):not(:last)');$category.hide();var $toggleBtn = $('div.showMore > a');$toggleBtn.toggle(function(){$category.show();$('.showMore a span').css("background", "url(images/up.gif) no-repeat 0 0").text("精简显示");$('ul li').filter(":contains('索尼'),:contains('其他')").addClass("promoted");},function(){$category.hide();$('.showMore a span').css("background", "url(images/down.gif) no-repeat 0 0").text("显示全部");$('ul li').removeClass("promoted");});})

?

?

?

?

热点排行