本文介绍: 商品介绍
  • 商品评价(50000)
  • 2.点击的同时,得到当前li 的索引号。//3.对应div实现显示,兄弟隐藏

  • 规格与包装
  • //2.获取当前li下标

  • 售后保障
  • 手机社区
  • <!DOCTYPE html>

    <html lang=”en”>

    <head>

        <meta charset=”UTF-8″>

        <meta name=”viewportcontent=”width=device-width, initialscale=1.0″>

        <meta httpequiv=”X-UA-Compatiblecontent=”ie=edge“>

        <title>Document</title>

        <style>

            * {

                margin: 0;

                padding: 0;

            }

           

            li {

                liststyletype: none;

            }

           

            .tab {

                width: 978px;

                margin: 100px auto;

            }

           

            .tab_list {

                height: 39px;

                border: 1px solid #ccc;

                backgroundcolor: #f1f1f1;

            }

           

            .tab_list li {

                float: left;

                height: 39px;

                lineheight: 39px;

                padding: 0 20px;

                textalign: center;

                cursor: pointer;

            }

           

            .tab_list .current {

                backgroundcolor: #c81623;

                color: #fff;

            }

           

            .item_info {

                padding: 20px 0 0 20px;

            }

           

            .item {

                display: none;

            }

        </style>

        <script src=”jquery.min.js“></script>

        <script>

            $(function(){

                /* 思路分析:

                    1.点击上部的li当前li 添加current类,其余兄弟移除类。

                    2.点击的同时,得到当前li 的索引号

                    3.让下部里面相应索引号item显示,其余的item隐藏 */

                $(“li“).click(function(){

                    //1.当前li添加current属性,其他兄弟清除current属性

                    $(this).addClass(“current”).siblings().removeClass(“current”);

                    //2.获取当前li下标

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

                    console.log(index);

                    //3.对应div实现显示,兄弟隐藏

                    $(“.item“).eq(index).show().siblings().hide();

                });

            });

        </script>

    </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=”itemstyle=”display: block;”>

                    商品介绍模块内容

                </div>

                <div class=”item“>

                    规格与包装模块内容

                </div>

                <div class=”item“>

                    售后保障模块内容

                </div>

                <div class=”item“>

                    商品评价(50000)模块内容

                </div>

                <div class=”item“>

                    手机社区模块内容

                </div>

            </div>

        </div>

        <script>

           

        </script>

    </body>

    </html>

    原文地址:https://blog.csdn.net/Aa132135/article/details/133688795

    本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

    如若转载,请注明出处:http://www.7code.cn/show_28452.html

    如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

    发表回复

    您的邮箱地址不会被公开。 必填项已用 * 标注