点击分类标题切换的时候 怎么取得子元素的索引值?

保密保密 发布于 2013/06/20 13:04
阅读 367
收藏 0
<!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
            <title>xxx</title>
            <style type="text/css">
                #title{width:300px;height:30px;background:pink;text-align:center;line-height:30px;}
                #cat1{float:left;width:145px;border:1px solid blue}
                #cat2{float:left;width:145px;border:1px solid blue}
                #name div{width:300px;height:30px;border-bottom:1px solid #ddd}
            </style>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js "></script>
        </head>
        <body>
            <div id="title">
                <div id="cat1">分类1</div> 
                <div id="cat2">分类2</div> 
            </div>
            <div id="name">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
            <script type="text/javascript" charset="utf-8">
                $('#cat1').click(function(){
                        $('#name').html('<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>');
                });


                $('#cat2').click(function(){
                        $('#name').html('<div>7</div><div>8</div><div>9</div>');
                });
                $('#name div').click(function(){
                    alert($(this).index()+1);
                });
            </script>
        </body>    

    </html>


//点击分类标题的时候,div#name 里面的子元素已经更换了,我想点击子元素,取得该元素的索引值,怎么实现?

加载中
0
blindcat
blindcat
不知道你为什么要这么做。一般做这种tab切换效果,习惯上内容区都是用显示和隐藏来实现效果的。如果你要通过动态改变DOM来做的话,就要为$('#name')里新写入的<div>标签通过bind()绑定click事件才可以
blindcat
blindcat
live方法支持动态添加的元素
保密保密
保密保密
谢谢
0
保密保密
保密保密
<script type="text/javascript" charset="utf-8">
                $('#cat1').click(function(){
                        $('.one').show();
                        $('.two').hide();
                });


                $('#cat2').click(function(){
                        $('.one').hide();
                        $('.two').show();
                });
                $('#name div').click(function(){
                    alert($(this).index()+1);
                });

            </script>

搞定,就用隐藏/显示 这个方法

返回顶部
顶部