for循环点击

最新推荐文章于 2022-08-18 14:52:46 发布

sujiao666

最新推荐文章于 2022-08-18 14:52:46 发布

阅读量399

点赞数

分类专栏：前端js 文章标签：点击按钮出现对应的div 其余隐藏

本文链接：https://blog.csdn.net/u013195452/article/details/52740988

版权

前端js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/jquery-3.0.0.js" ></script>
       <style>
           ol{
               list-style: none;
               margin-left: 300px;
               overflow: hidden;
           }
           ol li{
               width: 50px;
               height: 20px;
               border: 1px red solid;
               float: left;
               text-align: center;
               margin-left: 20px;
           }
           div{
               width: 150px;
               height: 150px;
               background: pink;
               float: left;
               margin-left: 300px;
               display: none;
           }
       </style>
   </head>
   <body>
       <ol>
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
       </ol>
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
   </body>
   <script>
   /*
   * js原生
   */
       var li = document.getElementsByTagName("li");
       var div = document.getElementsByTagName("div");
       for (var i=0;i<li.length; i++) {
           li[i].index = i;
           li[i].onclick = function(){
               for (var i = 0; i < div.length; i++) {
                   div[i].style.display = 'none';
               }
               div[this.index].style.display = 'block';
           }
       }

        $(div).css('display','none');
        /*jq   */
//     $('li').on('click',function(){
//           $('div').hide();
//           $('div').eq($(this).index()).show();
//     })
   </script>
</html>