问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

请求前端大师指点

头像
挥手凝淡墨
    8708153198
    htmljavascript
    阅读 3.4k
    7 个回答
    得票最新
    头像
    prototype_eva
      1.1k23657

      选项卡效果

      头像
      白色111
        87614

        直接上代码
        <!DOCTYPE html>
        <html>
        <head>

        <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>

        <script type="text/javascript" >

        $(function(){
   var bb=$(".aa li");
   bb.click(function(){
    $(this).addClass("red")/*给当前元素添加样式*/
    .siblings().removeClass("red");/*给当前元素的同类移除样式*/
    var index=bb.index(this);/*获取点击的是ul中第几个li*/
    alert(index)
    $(".yy li")/*选取要显示区域的子节点*/
    .eq(index).show()/*显示菜单对应的子元素*/
    .siblings().hide();/*隐藏没有选中的子元素siblings是选取同级别元素的意思*/
});

        });
        </script>

        <style>
    li{list-style:none; float:left;cursor:pointer; }

        .tab{width: 250px;background-color: red}
        .none{display: none;}
        .red{background-color: red;}

        </style>

        </head>
        <body>
        <div class="tab">

        <div  class="aa">
    <ul >
        <li class="red">
        第一个
        </li>
           <li >第2个</li>
              <li>第3个</li>
                 <li>第4个</li>
    </ul>
</div>
    <div>
    <ul  class="yy">
        <li class="">
        1sdfasdf个
        </li>
           <li class="none">是2打发斯蒂芬</li>
              <li class="none">阿斯蒂芬3</li>
                 <li class="none">水电费4</li>
    </ul>
</div>
</div>

        </body>
        </html>

        头像
        luber
          2731127

          要么用插件Jquery UI 要么自己写纯生js
          像这种mouseover直接改变css样式就好了。

          头像
          zhayes
            1.2k563101

            这就是个选项卡的效果，其实呢这里面的内容都全部加载在这个页面了，只不过是默认显示一个其他的都隐藏掉了，然后呢，绑定事件来控制相应的显示跟隐藏。其实你可以自己定一个类名，比如 .hd{display:none};通过添加跟移除这个类名来控制所选内容的显示跟隐藏。

            头像
            银马座
              61

              除了楼上的用法，用css3新特性也是很好的，比如target之类的

              头像
              岑锦超_Jin_C
                26
                头像
                热饭班长
                  3.7k20246350

                  http://gaoqiang19514.github.io/demoPage/

                  结构进页面去看，js代码就这些OK

                  // tab
                  (function(){

                  var controlList = $('.control-list-item');
var contentList = $('.content-list-item');

controlList.click(function(event) {
    var index = $(this).index();

    $(this).addClass('active').siblings().removeClass('active');

    contentList.eq(index).slideDown('slow').siblings().slideUp('fast');
});

                  })();

                  撰写回答
                  你尚未登录，登录后可以
                  • 和开发者交流问题的细节
                  • 关注并接收问题和回答的更新提醒
                  • 参与内容的编辑和改进，让解决方法与时俱进
                  推荐问题