Acticle 16：选项卡（jquery写法）

最新推荐文章于 2021-11-25 11:11:38 发布

颜洁

最新推荐文章于 2021-11-25 11:11:38 发布

阅读量540

点赞数 1

分类专栏： jquery知识

本文链接：https://blog.csdn.net/amytun_yu/article/details/52995296

版权

jquery知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
         #box{
            margin: 0 auto;
         }
         #box div{
            width: 150px;
            height: 150px;
            border: 1px solid darkcyan;
            display: none;
         }
         .at{
            background: red;
         }
        </style>
        <script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
//          window.onload=function(){   
//              //js的选项卡的写法
//              var oBox=document.getElementById('box');
//              var aBtn=oBox.getElementsByTagName('input');
//              var aDiv=oBox.getElementsByTagName('div');
//              
//              for(var i=0;i<aBtn.length;i++)
//              {   
//                  aBtn[i].index=i
//                  aBtn[i].onclick=function(){
//                      for(var i=0;i<aBtn.length;i++){
//                          aBtn[i].className='';
//                          aDiv[i].style.display='none';
//                      }
//                      aBtn[this.index].className='at';
//                      aDiv[this.index].style.display='block';
//                  }
//                  
//              }   
//              
//          }


            //jquery写法

//              $('#box').find('input').click(function(){
//                  $('#box').find('input').attr('class','');
//                  $('#box').find('div').css('display','none');
//                  
//                  
//                  $(this).attr('class','at');
//                  $('#box').find('div').eq($(this).index()).css('display','block');
//                  
//              });
//              
                $(function(){
                    $('#box').find('input').click(function(){//相当

                    $('#box').find('input').attr('class','');//相当于遍历所有input的for循环，让所有input的classname为空；
                    $('#box').find('div').css('display','none');//相当于遍历所有div的for循环，让所有div的display为空；

                    $(this).attr('class','at');
                    //让当前的input的classname变为“at”，与上面的$('#box').find('input').attr('class','');配对使用

                    $('#box').find('div').eq($(this).index()).css('display','block');
                });//让当前的div的display的值为显示，与上面$(this).attr('class','at');配对使用。

            });

        </script>
    </head>

    <body>
        <div id="box">
            <input type="button" id="" value="btn1"  class="at"/>
            <input type="button" id="" value="btn2" />
            <input type="button" id="" value="btn3" />
            <div id="" style="display: block;">
                1
            </div>
            <div id="">
                2
            </div>
            <div id="">
                3
            </div>
        </div>

    </body>

</html>

颜洁

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Acticle 16：选项卡（jquery写法）

代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ margin: 0 auto; } #box div{
复制链接

扫一扫