|
|
@@ -1,83 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
- <head>
|
|
|
- <meta charset="UTF-8" />
|
|
|
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
- <title>Document</title>
|
|
|
- <script src="./js/jquery-1.7.2.min.js"></script>
|
|
|
- <style>
|
|
|
- * {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- li {
|
|
|
- list-style-type: none;
|
|
|
- }
|
|
|
-
|
|
|
- .tab {
|
|
|
- width: 978px;
|
|
|
- margin: 100px auto;
|
|
|
- }
|
|
|
-
|
|
|
- .tab_list {
|
|
|
- height: 39px;
|
|
|
- border: 1px solid #ccc;
|
|
|
- border-bottom: 1px solid #c81623;
|
|
|
- background-color: #f1f1f1;
|
|
|
- }
|
|
|
- .tab_list li {
|
|
|
- float: left;
|
|
|
- height: 39px;
|
|
|
- line-height: 39px;
|
|
|
- padding: 0 20px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .tab_list .current {
|
|
|
- background-color: #c81623;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .item_info {
|
|
|
- padding: 20px 0 0 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .item {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- </style>
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <div class="tab">
|
|
|
- <div class="tab_list">
|
|
|
- <ul>
|
|
|
- <li class="current">商品介绍</li>
|
|
|
- <li>规格与包装</li>
|
|
|
- <li>售后保障</li>
|
|
|
- <li>商品评价（50000）</li>
|
|
|
- <li>手机社区</li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="tab_con">
|
|
|
- <div class="item" style="display: block">商品介绍模块内容</div>
|
|
|
- <div class="item">规格与包装模块内容</div>
|
|
|
- <div class="item">售后保障模块内容</div>
|
|
|
- <div class="item">商品评价（50000）模块内容</div>
|
|
|
- <div class="item">手机社区模块内容</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <script>
|
|
|
- $(".tab_list ul li").click(function () {
|
|
|
- // 获得点击li的索引号
|
|
|
- var index = $(this).index();
|
|
|
- // 给当前选中的tab加上current类名，其他兄弟的类名去掉
|
|
|
- $(this).addClass("current").siblings().removeClass("current");
|
|
|
- // 第index位的div显示，其他div隐藏
|
|
|
- $(".tab_con div").eq(index).show().siblings().hide();
|
|
|
- });
|
|
|
- </script>
|
|
|
- </body>
|
|
|
-</html>
|
|
|
-
|
lchao