zoukankan      html  css  js  c++  java
  • 随手用JQ写个选项卡

    <div class="box">
        <ul>
            <li class="one">选项卡1</li>
            <li>选项卡2</li>
            <li>选项卡3</li>
        </ul>
        <div class="content">
            <div class="ct">菜单1</div>
            <div class="ct">菜单2</div>
            <div class="ct">菜单3</div>
        </div>
    </div>
    $(document).ready(function(){//jq入口
        $('.ct:gt(0)').hide();//gt()选择器,选中索引后的全部
    
        var tab = $('.box ul li');//定义是为了后面写的方便
        tab.click(function(){//选项卡当然是基于点击的
            $(this).addClass('one').siblings().removeClass('one');//选中的项,加一个选中的样式,兄弟删除该样式的类名
    
            var tab_index = tab .index(this);//.index()定义选项卡的索引
            $('.ct').eq(tab_index).show().siblings().hide();//把内容关联选项卡的索引,使内容随选项卡被点击而产生变化  ||  eq()选择器,选中该索引的项
    
        });
    });

    别忘了引入jq

     <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

  • 相关阅读:
    上机练习
    myeclipse 快捷键
    关于java classpath问题
    windows installer 出错问题解决
    hibernate 问题
    axis2 部署webservice
    webservice开发
    关于web前端开发
    软件工程工具
    计网笔记
  • 原文地址:https://www.cnblogs.com/iampengl/p/9238580.html
Copyright © 2011-2022 走看看