zoukankan      html  css  js  c++  java
  • js封装选项卡

    <div class="forestcamp_box">
    <img src="img/home_02.jpg" />
    <div class="subtitle" id="button">
    <p>通知公告</p>
    <p>政策解读</p>
    <div>查看更多 >></div>
    </div>
    <div id="text" class="main_matter">
    <div class="main_matter">
    <p>黔西南高速交警大队“四个狠抓” 强化道路交通事故预防工作</p>
    <p>扩大共识,精诚合作——中俄运输合作分委会第22次会议在俄......</p>
    <p>何建中在湖北调研时指出:进一步做好总体谋划完善标准规范......</p>
    <p>【评论】平台公司应当将“自责”落实到行动上</p>
    <p>【见证40年·我们的奋斗故事】“内河船不跨省” 到江海联运通全球</p>
    <p>云南首个高速公路债券项目上市募资</p>
    <p>《2017年全国收费公路统计公报》解读</p>
    <p>交通运输部关于《通航建筑物运行管理办法(征求意见稿)》公开......</p>
    </div>
    <div class="main_matter">
    <p>【见证40年·我们的奋斗故事】“内河船不跨省” 到江海联运通全球</p>
    <p>云南首个高速公路债券项目上市募资</p>
    <p>《2017年全国收费公路统计公报》解读</p>
    <p>交通运输部关于《通航建筑物运行管理办法(征求意见稿)》公开......</p>
    </div>
    </div>
    </div>

    没有把贴入,看贴图吧

    封装好的选项卡进行调用
    change({
      btnsId:"button",//传入按钮父级id
      contsId:"text",//传入块元素父级id
         btnsClassNormal:"title_noraml",// 传入按钮未点击样式
      btnsClassSpecial:"title_specil"//传入按钮点击后样式
       });

    对选项卡进行封装
    function change(cha){
      var btns = document.getelementById(cha.btnsId).children;//获取你要进行点击的按钮
      var conts = document.getelementById(cha.contsId).children;//获取你要对应操作的块
      for (var i=0;i<btns.length;i++) {
        btns[i].index = i; //设置一个index属性使按钮和块进行对应

        btns[i].onclick=function(){

          for (var j=0;j<conts.length;j++) {//清空
           btns[j].className = cha.btnsClassNormal; 
            conts[j].style.display = "none";
          }
        this.className = cha.btnsClassSpecial;//点击的进行样式添加
        conts[this.index].style.display = "block";//对应块显示出来
        }
      }
    }

  • 相关阅读:
    神经网络损失函数公式解读
    centos 安装python PIL模块
    Centos6.8 安装dlib库时出错【升级gcc 到4.9.0以上】
    python DBUtils 线程池 连接 Postgresql(多线程公用线程池,DB-API : psycopg2)
    Postgresql 查看锁的过程
    Python yield 函数功能
    Centos6.8 安装spark-2.3.1 以及 scala-2.12.2
    Oracle---常用SQL语法和数据对象
    Oracle---number数据类型
    java框架篇---hibernate之连接池
  • 原文地址:https://www.cnblogs.com/shangXR/p/9680259.html
Copyright © 2011-2022 走看看