jquery $.each()选项卡

╰+攻爆jí腚メ 2022-11-28 10:34 192阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>jquery选项卡</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <style type="text/css">
          ul{
          margin:0;
          padding:0;
          list-style: none;
          }
          ul li{
          float:left;
          width:80px;
          height:40px;
          background: #eee;
          font-family: "微软雅黑";
          text-align: center;
          line-height: 40px;
          border:3px solid #f0f;
          } 
          #bottom{
          clear:left;
          width:430px;
          height:300px;
          background: #333;
          }
          #bottom div{
          display: none;
          }
          #bottom .bottom-show{  /*不写#bottom会该样式不会执行*/
          display: block;
          font-family: "微软雅黑";
          font-size: 20px;
          color:#f0f;
          }
          .title-show{
          border:3px solid #333;
          }
    </style>
    </head>
    <body>
    <div>
    <ul id="title">
    <li class="title-show">汽车</li>
    <li>头条</li>
    <li>八卦</li>
    <li>娱乐</li>
    <li>体育</li>
    </ul>
    <div id="bottom">
    <div class="bottom-show">汽车</div>
    <div>头条</div>
    <div>八卦</div>
    <div>娱乐</div>
    <div>体育</div>
    </div>
    </div>
    </body>
    <script type="text/javascript">
    $(function(){
    $("li").each(function(index){
    $(this).mouseover(function(){
               $(this).addClass("title-show").siblings().removeClass("title-show");
               $("#bottom>div:eq("+index+")").addClass("bottom-show").siblings().removeClass("bottom-show");
       })
       })
    })
    </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery $.each()选项卡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

╰+攻爆jí腚メ/ 2022年11月28日 10:34/ 0 赞/ 193 阅读

相关 jQuery实现选项卡嵌套

描述： 1.划上底部a的每一个菜单让顶部的标签span的内容变成对应的a的内容 2.划上左边的li 切换到右侧对应的div

落日映苍穹つ/ 2022年09月10日 10:24/ 0 赞/ 195 阅读

相关 Jquery——Day9（选项卡）

选项卡，是一种能提供给用户在同一界面切换不同内容的UI，尤其是在页面布局紧凑的页面上，提供了非常好的用户体验。 1、使用tabs，如下所示tabs.html

缺乏、安全感/ 2022年07月16日 17:54/ 0 赞/ 223 阅读

相关 jQuery EasyUI，Tabs(选项卡)组件

[https://www.cnblogs.com/adc8868/p/6647680.html][https_www.cnblogs.com_adc8868_p_6647680

末蓝、/ 2022年05月30日 12:36/ 0 赞/ 316 阅读

相关 jQuery实现选项卡功能

废话不多说了，直接上代码就好了 DOM结构有点儿长，其实很明了的。。。 <table> <thead> <tr id="ta

ゝ一世哀愁。/ 2022年05月21日 11:24/ 0 赞/ 251 阅读

相关 jQuery 选项卡

选项卡是非常常见而实用的效果，本篇文章示例一个简单的选项卡效果，在以往的代码中都是选择jQuery对象级别插件扩展，本次将改为类级别插件扩展的方式。上效果图： ![70]

左手的ㄟ右手/ 2022年05月11日 14:34/ 0 赞/ 231 阅读

相关 jquery封装选项卡

<style type="text/css"> ul,li,div{ margin:0; padding:0;} ul,li{ list-styl

た入场券/ 2022年04月14日 05:07/ 0 赞/ 327 阅读

相关 jquery选项卡

功能介绍： 1.鼠标划过当前按钮，当前按钮变色 2.对应图片展示 3.鼠标划过其他按钮，对应图片出现，其他按钮变回原色，其他图片隐藏所有代码：

叁歲伎倆/ 2022年03月16日 07:22/ 0 赞/ 389 阅读

相关 jQuery选项卡

Html的代码 <body> <div class="wrap"> <ul class="blist clearfix">

我不是女神ヾ/ 2022年02月02日 19:43/ 0 赞/ 357 阅读

相关 Jquery-选项卡

Jquery-选项卡要求：单击当前选项出现相应内容制作选项卡的原理比较简单，通过show()显示、hide()隐藏来切换不同内容步骤一：建立站点 !

た入场券/ 2021年09月16日 23:18/ 0 赞/ 431 阅读