首页 > web前端 > js教程 > jQuery移动端Tab选项卡效果实现方法

jQuery移动端Tab选项卡效果实现方法

小云云
发布: 2018-01-22 14:02:37
原创
3131 人浏览过

tab选项卡功能我们也会经常接触,本文我们主要介绍jQuery实现移动端Tab选项卡效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧,希望能帮助到大家。

效果图:

代码如下:


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

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

 <title>移动端Tab选项卡</title>

 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

 <script>

  $(function() {

   $(".tab a").click(function() {

    $(this).addClass(&#39;curr&#39;).siblings().removeClass(&#39;curr&#39;);

    var index = $(this).index();

    number = index;

    $(&#39;.nav .content li&#39;).hide();

    $(&#39;.nav .content li:eq(&#39; + index + &#39;)&#39;).show();

   });

  })

 </script>

 <style>

  *{

   margin: 0;

   padding: 0;

  }

  p, input, textarea, button, a {

   -webkit-tap-highlight-color: rgba(0,0,0,0);

  }

  ul, li, ol{

   list-style: none;

  }

  a {

   color: #323232;

   outline-style: none;

   text-decoration: none;

  }

  .border-b {

   position: relative;

  }

  .border-b:after {

   top: auto;

   bottom: 0;

  }

  .border-t:before, .border-b:after {

   content: &#39;&#39;;

   position: absolute;

   left: 0;

   background: #ddd;

   right: 0;

   height: 1px;

   -webkit-transform: scaleY(0.5);

   transform: scaleY(0.5);

   -webkit-transform-origin: 0 0;

   transform-origin: 0 0;

  }

  .nav {

   background-color: #fff;

   text-align: center;

  }

  .nav .tab {

   width: 100%;

   position: relative;

   overflow: hidden;

  }

  .tab a {

   float: left;

   width: 49%;

   height: 2.56rem;

   line-height:2.56rem;

   display: inline-block;

   border-right: 1px solid #e1e1e1;

  }

  .tab a:last-child {

   border-right: 0;

  }

  .tab .curr {

   border-bottom: 2px solid #fc7831;

   color: #fc7831;

  }

  .content ul li {

   display: none;

   padding: 3%;

   width: 94%;

  }

 </style>

</head>

<body>

<p class="nav">

 <p class="tab border-b">

  <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="curr">商品介绍</a>

  <a href="javascript:;" rel="external nofollow" rel="external nofollow" >评价(99)</a>

 </p>

 <p class="content">

  <ul>

   <li style="display: block">商品介绍</li>

   <li>评价</li>

  </ul>

 </p>

</p>

</body>

</html>

登录后复制

大家学会了吗?赶紧动手尝试一下吧。

相关推荐:

JavaScript插件Tab选项卡详解

layui选项卡效果实现代码

jquery实现tab选项卡切换效果

以上是jQuery移动端Tab选项卡效果实现方法的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板