返回选中状态的案例......登陆

选中状态的案例实现

奋斗2018-12-11 11:12:18308

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>仿天猫商城点击选中商品效果</title>

    <link rel="shortcut icon"  href="static/images/logo.png" type="image/x-icon" />

    <link rel="stylesheet" href="static/css/style.css" type="text/css">

    <script type="text/javascript" src="static/js/jquery.js"></script> 

    <script type="text/javascript">

      $(function() {

        $('span').click(function(){

          if($(this).hasClass('check')){

            $(this).removeClass('check')

          }else{

            $(this).addClass('check').siblings('span').removeClass('check')

          }

        })

      })

    </script>

</head>

<body>

  <div class="top">请选择信息后加入购物车</div>

  <div class="main">

    <p class="p1">

      <b style="border:0px;">版本</b>

      <span id="sp0" class="ed" name="0">ONE A2001</span>

      <span id="sp1" class="ed" name="0">ONE A0001</span>

      <span id="sp2" class="ed" name="0">ONE A1001</span>

    </p>

    <p class="p2">

      <b style="border:0px;">机身颜色</b>

      <span id="sp3" class="co" name="0">白色</span>

      <span id="sp4" class="co" name="0">黑色</span>

      <span id="sp5" class="co" name="0">金色</span>

    </p>

    <p class="p3">

      <b style="border:0px;">套餐类型</b>

      <span id="sp6" class="pa" name="0">标配</span>

      <span id="sp7" class="pa" name="0">套餐一</span>

      <span id="sp8" class="pa" name="0">套餐二</span>

    </p>

    <p class="p4">

      <b style="border:0px;">运行内存</b>

      <span id="sp9" class="ru" name="0">2GB</span>

      <span id="sp10" class="ru" name="0">3GB</span>

      <span id="sp11" class="ru" name="0">4GB</span>

    </p>

    <p class="p5">

      <b style="border:0px;">机身内存</b>

      <span id="sp12" class="me" name="0">16GB</span>

      <span id="sp13" class="me" name="0">32GB</span>

      <span id="sp14" class="me" name="0">64GB</span>

    </p>

    <p class="p6">

      <b style="border:0px;">产地</b>

      <span id="sp15" class="ad" name="0">中国大陆</span>

      <span id="sp15" class="ad" name="0">港澳台</span>

    </p>

    <p class="p7">

      <b style="border:0px;">价格</b>

      <span id="sp15" class="ad" name="0">999元抢购</span>

    </p>

    <p class="p8">

      <b style="border:0px;">数量</b>

      <input type="text" value="1" style="width:40px;height:26px;">

    </p>

    <p style="margin-top:30px;margin-left:95px;">

      <button class="bu1">加入购物车</button>

      <button class="bu2">打开购物车</button>

    </p>

     

  </div>

  <div class="shopCar">

    <li style="font-size:14px;background: #C40000;color: white;">您所选商品信息如下：</li>

    <div class="sright">

       

    </div>

    <div class="kong" style="background:#ccc;width:100%;height:7px;display:none"></div>

    <button class="bu3" style="width:80px;height:35px;margin-left:20px;">隐藏购物车</button>

    <button class="bu4" style="width:80px;">清空购物车</button>

  </div>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

* {

margin: 0px auto;

padding: 0px;

}

.top {

width: 400px;

height: 35px;

line-height: 35px;

text-align: center;

margin-top: 50px;

border: 1px solid red;

border-bottom: 0px;

background: #C40000;

color: white;

}

.main {

width: 400px;

height: 400px;

border: 1px solid red;

}

p {

width: 400px;

height: 26px;

margin-top: 10px;

}

b {

width: 90px;

height: 26px;

line-height: 26px;

text-align: center;

font-size: 12px;

color: #838383;

border: 1px solid #ccc;

display: block;

float: left;

margin-left: 5px;

}

span {

width: 90px;

height: 26px;

line-height: 26px;

text-align: center;

font-size: 12px;

color: #838383;

border: 1px solid #ccc;

display: block;

float: left;

margin-left: 5px;

}

span:hover {

cursor: pointer;

}

button {

width: 120px;

height: 35px;

background: #C40000;

color: white;

border: 0px;

}

button:hover {

cursor: pointer;

}

.shopCar {

width: 200px;

border: 1px solid red;

position: absolute;

top: 50px;

right: -200px;

}

li {

width: 200px;

height: 26px;

line-height: 26px;

margin: 5px auto;

text-align: center;

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

background: white;

}

h4 {

width: 100%;

text-align: center;

}

.check {

width: 88px;

height: 24px;

line-height: 24px;

border: 2px solid red;

color: red;

}

.change {

width: 200px;

height: 220px;

border: 1px solid red;

background: yellow;

}

.sc {

width: 30px;

height: 20px;

font-size: 10px;

position: relative;

top: 25px;

right: 0px;

float: right;

}

总结：可以通过添加类样式的方式，动态改变元素的样式，达到点击选中的效果。通过这选中.png个案例，巩固了html,css和jquery的知识。比较实用。

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp，后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送