jQuery(七)——综合练习:品牌展示

3. 综合练习:品牌展示


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-2021-02-01title>
    <style type="text/css">
        * {
      
            margin: 0;
            padding: 0;
        }

        body {
      
            font-size: 12px;
            text-align: center;
        }

        a {
      
            color: #04D;
            text-decoration: none;
        }

        a:hover {
      
            color: #F50;
            text-decoration: underline;
        }

        .SubCategoryBox {
      
            width: 600px;
            margin: 0 auto;
            text-align: center;
            margin-top: 40px;
        }

        .SubCategoryBox ul {
      
            list-style: none;
        }

        .SubCategoryBox ul li {
      
            display: block;
            float: left;
            width: 200px;
            line-height: 20px;
        }

        .showmore, .showless {
      
            clear: both;
            text-align: center;
            padding-top: 10px;
        }

        .showmore a, .showless a {
      
            display: block;
            width: 120px;
            margin: 0 auto;
            line-height: 24px;
            border: 1px solid #AAA;
        }

        .showmore a span {
      
            padding-left: 15px;
            background: url(img/down.gif) no-repeat 0 0;
        }

        .showless a span {
      
            padding-left: 15px;
            background: url(img/up.gif) no-repeat 0 0;
        }

        .promoted a {
      
            color: #F50;
        }
    style>
    <script type="text/javascript" src="../script/jquery-1.7.2.js">script>
    <script type="text/javascript">
---------------------------在此完成功能---------------------------
    script>
head>
<body>
    <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">
			  <span>显示全部品牌span>
			a>
		div>
	div>
body>
html>

初始界面如下:
jQuery(七)——综合练习:品牌展示_第1张图片

需要完善的功能:

  1. 刚开始时所有的品牌不完全展示出来,要求仅显示前两行,点击显示全部品牌后才能完全显示出来。
  2. 品牌全部显示出来后,字样应该变成显示精简品牌,同时点击后,只显示前两行
  3. 注意到文字旁边的图片,当为显示全部品牌时,图片的角标向下;当为显示精简品牌,图片的角标向上。
    在样式.showmore a span 和 样式 .showless a span 中
  4. 在显示全部品牌后,给三星标签加高亮,在显示精简品牌后,取消三星标签的高亮。
    在.promoted a 样式中
<script type="text/javascript" src="../script/jquery-1.7.2.js">script>
<script type="text/javascript">
        $(function () {
      
        
            var $lisObj=$("li:gt(5):not(:last)");
            var $aObjs=$("div > div > a");
一、初始状态,仅显示前两行和最后一个的 其它品牌相机 ,最后一个li标签的下标为5
            $lisObj.hide();
二、给 显示全部品牌/显示精简品牌 绑定单击事件
            $aObjs.click(function () {
      
                // 让某些品牌,显示,或隐藏
                $lisObj.toggle();
                //如果品牌是隐藏的,需要改标签为显示全部品牌;如果品牌是显示的,需要改标签为显示精简品牌;
                //同时修改对应的图片
                if ($lisObj.is(":hidden")) {
      
                   // 品牌隐藏 :1 显示全部品牌
                    $aObjs.find("span").text("显示全部品牌");
                    //2.角标向下 showmore
                    $("div > div").removeClass("showless");  //虽然是类样式,但是不能写成.showless,不能加点
                    $("div > div").addClass("showmore");
                    //3.去掉三星的高亮
                    $("li:contains('三星')").removeClass("promoted");
                } else {
      
                    $aObjs.find("span").text("显示精简品牌");
                    $("div > div").removeClass("showmore");
                    $("div > div").addClass("showless");
                    //给三星加高亮
                    $("li:contains('三星')").addClass("promoted");
                }
                return false;
            });
            
        });
script>

你可能感兴趣的:(JavaWeb,html,css,js)