xjyyyyyyi 2021-10-22 21:22 采纳率: 100%
浏览 60
已结题

这段代码想要用jQuery实现选项卡要加什么？

img


#left")
![img](
https://img-mid.csdnimg.cn/release/static/image/mid/ask/828927809436178.png
"=600

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>选项卡练习2</title>
  <script type="text/javascript" src="js/jquery.min.js">
   
</script>
  <style>
    *{padding:0;margin:0}
    a{text-decoration:none;color:#fff}
    ul,li{list-style:none}
    .tab{width:780px;height:360px;background:#fff;margin:100px auto;border:1px solid red;}
    .tab .header ul{height:40px;background:green;line-height:40px;border-bottom:1px solid red}
    .tab .header li{float:left;}
    .tab .header li a:hover{background:#fff;color:#111;height:41px;}
    .tab .header li a.selected{border-right:1px solid red;border-left:1px solid red;
                               background:#fff;color:#333;height:41px；}
    .tab .header li a:first-child.selected{border-left:none;}
    .tab .header li a{display:block;padding:0 20px;border-right:1px solid #fff;}
    .tab .tabcnt{padding:10px;display:none;}
  </style>
 </head>
 <body>    <!--选项卡-->
    <div class="tab">
        <div class="header">
            <ul>
                <li><a class="selected" href="#">男装</a></li>
                <li><a href="#">女装</a></li>
                <li><a  href="#">鞋靴</a></li>
                <li><a href="#">箱包</a></li>
                <li><a href="#">内衣配饰</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="tabcnt" style="display:block">男装</div>
            <!--最后强调：style="display:block"-->            
            <div class="tabcnt">女装    </div>
            <div class="tabcnt">鞋靴</div>
            <div class="tabcnt">箱包    </div>
            <div class="tabcnt">配饰    </div>
        </div>
    </div>
    
    <script >
        
    </script>
 </body>
</html>
  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2021-10-22 21:53
    关注

    题主错误是没有lang这个id的dom对象，所以tab没有加上事件，并且tab没移除非焦点tab的selected样式
    题主要的代码如下，有帮助麻烦点个【采纳该答案】，谢谢~~有其他问题可以继续交流~

    
    $(function () {
        /*$("#lang li").mouseover(function () {
            var index = $(this).index();
            console.log(index);
            $(".content div").eq(index).show(".tabcnt");
            $(".content div").eq(index).siblings().hide();
        })*/

        $('.tab li').mouseover(function () {
            var index = $(this).siblings().removeClass('selected').end().addClass('selected').index();//移除当前移入的li兄弟焦点样式，及给当前li加焦点样式
            $('.content div').hide().eq(index).show();//隐藏所有容器后显示tab对应的内容容器
        })
    })
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 10月30日
  • 已采纳回答 10月22日
  • 修改了问题 10月22日
  • 创建了问题 10月22日

悬赏问题

  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度