jquery+css实现Tab栏切换的代码实例

谁践踏了优雅 2022-01-29 00:31 257阅读 0赞

前几天面试碰到现场给写一个Tab栏切换的功能，思想基本上懂，但是好久没写过，一时要全部实现效果还真有点难。回来后，再把思路理一理，写一个，基础还是很重要的。

最终要实现的效果图如下：

（1）点击tab栏显示对应的内容，并且tab栏样式变化。实现方式：一般tab栏如果要做成比较好看的样式，会切两张图作为背景，一张用于选中时的背景，一张用于未选中的背景。这里为了简单，只用css设置样式。然后为每个tab绑定click事件，当触发click事件时，对应的内容div的display设置block，否则设置为none。

（2）当鼠标悬停在没有选中的tab栏上时，改变样式，移开时又恢复回来的样式。如果tab栏已选中，则鼠标是否悬停不影响样式。实现方式：为tab栏添加hover事件，当鼠标进入时，判断该tab栏是不是被选中（可以为了选中的tab栏设置一个class，只需要判断是否含有该class即可），在不选中的情况下再添加hover的样式。

完整代码如下[（代码下载地址）：][Link 1]

HTML：

1.  <!DOCTYPE html>
2.  <html lang="en">
3.  <head>
4.  <meta charset="UTF-8" />
5.  <title>tab标签</title>
6.  <link href="css/style.css" rel="external nofollow" type="text/css" rel="stylesheet">
7.  </head>
8.  <body>
9.  <div class="tab-contain">
10. 
11. <ul id="tabs">
12. <li class="current"><a href="\#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab1">One</a></li>
13. <li><a href="\#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab2">Two</a></li>
14. <li><a href="\#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab3">Three</a></li>
15. <li><a href="\#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab4">Four</a></li>
16. </ul>
17. 
18. <div id="content">
19. <div id="tab1" class="item show">
20. <h2>title 11111</h2>
21. <p>text here!!!text here!!!text here!!!text here!!!text here!!!</p>
22. <p>text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!</p>
23. </div>
24. <div id="tab2" class="item">
25. <h2>title 2222</h2>
26. <p>text here!!!text here!!!text here!!</p>
27. <p>text here!!!text here!!!text here!!!text here!text here!!!text here!!!text here!!!</p>
28. </div>
29. <div id="tab3" class="item">
30. <h2>title 33333</h2>
31. <p>text here!!!</p>
32. <p>text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!</p>
33. </div>
34. <div id="tab4" class="item">
35. <h2>title 44444</h2>
36. <p>text here!!!text here!!!text here!!!text here!!!text here!!!</p>
37. <p>text here!!!text </p>
38. </div>
39. </div>
40. </div>
41.  
42. <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
43. <script type="text/javascript" src="js.js"></script>
44. </body>
45. </html>

CSS:

1.  .tab-contain\{
2.  margin: 50px auto;
3.  width: 1000px;
4.  padding:100px;
5.  background: \#7F7D7D;
6.  \}
7.  \#tabs \{
8.  overflow: hidden;
9.  width: 100%;
10. margin: 0;
11. padding: 0;
12. list-style: none;
13. \}
14. \#tabs li \{
15. float: left;
16. margin: 0;
17. \}
18. li a \{
19. position: relative;
20. background: \#ddd;
21. padding: 10px 50px;
22. float: left;
23. text-decoration: none;
24. color: \#444;
25. text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
26. border-radius: 20px 20px 0 0;
27. box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
28. \}
29.  
30. .current a\{
31. outline: 0;
32. background: \#fff;
33. z-index: 4;
34. \}
35. .hoverItem a\{
36. background: \#AAC8B9;
37. \}
38. \#content \{
39. background: \#fff;
40. padding: 50px;
41. height: 220px;
42. position: relative;
43. border-radius: 0 5px 5px 5px;
44. box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
45. \}
46. .item\{
47. display: none;
48. \}
49.  
50. .show\{
51. display: block;
52. \}

JS:

1.  $(function()\{
2.  $('\#tabs a').click(function(e) \{
3.  e.preventDefault();
4.  $('\#tabs li').removeClass("current").removeClass("hoverItem");
5.  $(this).parent().addClass("current");
6.  $("\#content div").removeClass("show");
7.  $('\#' + $(this).attr('title')).addClass('show');
8.  \});
9.   
10. $('\#tabs a').hover(function()\{
11. if(!$(this).parent().hasClass("current"))\{
12. $(this).parent().addClass("hoverItem");
13. \}
14. \},function()\{
15. $(this).parent().removeClass("hoverItem");
16. \});
17. \});

[Link 1]: http://xz.jb51.net:81/201905/yuanma/jquery_css_tab%28jb51.net%29.rar