您的位置：首页 > Web前端 > JQuery

jquery选择器

2009-10-26 21:30 183 查看

<!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" >
<head>
    <title>jquery选择器</title>
    <mce:style type="text/css"><!--
    #SubCategory
    {
      width:150px;
      font-size:12px;
      line-height:20px;
    }
    
--></mce:style><style type="text/css" mce_bogus="1">    #SubCategory
    {
      width:150px;
      font-size:12px;
      line-height:20px;
    }
    </style>
    <mce:script type="text/javascript" src="jquery-1[1].3.2.min.js" mce_src="jquery-1[1].3.2.min.js"></mce:script>
</head>
<body>
<mce:script type="text/javascript"><!--
$(function(){
var $Category=$('ul li:gt(5):not(:last)');
$Category.hide();
var $Tooglebtn=$('div.ShowMore > a');
$Tooglebtn.click(function(){
if(Category.is(":visible"))
{
  Category.hide();
  $('.ShowMore a span').text('显示所有商品');
}
else
{
$('ul li:gt(5)').css("background","#ffbbaa");
$('.ShowMore a span').css.text('显示精简商品');
}

})
return false;
})
// --></mce:script>
<div id="SubCategory">
<ul>
<li><a href="#" mce_href="#">佳能</a><i>(2300)</i></li>
<li><a href="#" mce_href="#">索尼</a><i>(2300)</i></li>
<li><a href="#" mce_href="#">松下</a><i>(2300)</i></li>
<li><a href="#" mce_href="#">尼康</a><i>(2300)</i></li>
<li><a href="#" mce_href="#">卡西欧</a><i>(2300)</i></li>
<li><a href="#" mce_href="#">富士</a><i>(2300)</i></li>
<li><a href="#" mce_href="#">柯达</a><i>(2300)</i></li>
<li><a href="#" mce_href="#">宾得</a><i>(2300)</i></li>
<li><a href="#" mce_href="#">理光</a><i>(2300)</i></li>
<li><a href="#" mce_href="#">明基</a><i>(2300)</i></li>
<li><a href="#" mce_href="#">爱国者</a><i>(2300)</i></li>
<li><a href="#" mce_href="#">其他品牌</a><i>(2300)</i></li>
</ul>
</div>
<div class="ShowMore">
<a href="jCss.htm" mce_href="jCss.htm"><span>显示所有商品</span></a>
</div>

</body>
</html>

jquery

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

标签：

相关文章推荐

新的分享

章节导航