文档章节

jq 选择器简单使用

花_生壳
 花_生壳
发布于 2016/03/29 17:16
字数 266
阅读 8
收藏 0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
   
        <style>
    #tabs_com ul li {
        display: none;
    }
    </style>
</head>

<body>
    <div id="tabs">
        <ul>
            <li>aaaa</li>
            <li>ssss</li>
            <li>dddd</li>
            <li>cccc</li>
        </ul>
    </div>
    <div id="tabs_com">
        <ul>
            <li>aaaa的内容</li>
            <li>ssss的内容</li>
            <li>dddd的内容</li>
            <li>cccc的内容</li>
        </ul>
    </div>

     <script>
    $(function() {

        $("#tabs ul li").click(function() { //  每个li的点击触发事件
            $(this).css('color', 'red').siblings('li').css('color', 'blue');  //  点击完成切换css样式
            var tabss = $(this).index();// #tabs 每行数组一个和下面 #tabs_com对应的数值
            $("#tabs_com ul li").eq(tabss).show(400).siblings('li').hide(400);// eq方法对应数值的css显示隐藏   
        });    
         $('#tabs ul li').eq(2).click();//页面载入的时候默认点击一次0号数值
    })

    // siblings 使用方法. 修改同胞元素以外的内容
    // var tabss = $("id").index()  定义变量tabss的数值   index值从0开始
    // eq  方法  选取指定带有index值的元素
    
     </script>




</body>

</html>


© 著作权归作者所有

花_生壳
粉丝 2
博文 9
码字总数 1115
作品 0
石家庄
程序员
私信 提问
jQuery学习笔记(二)

jQ变成过程 1,引入jQ的js文件 2,使用选择器定位要操作的节点 调用jQ的方法进行操作 jQ对象 为了解决浏览器兼容问题而解决的提供一种统一封装后的对象描述 jq提供的方法都是jQ特有的,而且大...

weixin_36171533
2017/12/03
0
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
2018/05/10
0
0
JQ工具集--J-LibTool

J-libtool是一款WEB前端开发 JQ工具集 提供BOX弹出层,ajax表单提交,input默认值,Cookie存取,前端验证码 等诸多功能. J-libtool 开发模式并非传统的jq插件方法,有自己独立的功能模块,如果...

木然
2013/07/22
1K
0
JS和JQ的event对象对比和应用

currentTarget 事件冒泡阶段所在的DOM target, originalTarget原始的DOM 代码测试: 结果分析: 总结: js的event参数中,不管是, , 都是指向第一个触发事件的元素(还没冒泡),而在click事...

前端届的科比
2014/08/11
1K
0
Python全栈 Web(jQuery 一条龙服务)

jQuery 1.jQuery介绍 jQuery是一个轻量级的JS库 - 是一个被封装好的JS文件,提供了更为简便的元素操作方式 核心理念:Write Less Do More jQuery版本: jQuery 2.x 不再支持IE6.7.8 jQuery 1.11...

巴黎香榭
2018/09/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部