zoukankan      html  css  js  c++  java
  • 操作标签里的标签

    遇到多个li标签内分别有多个a标签该如何操作到每一个a标签

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>操作标签里的标签</title>
    <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#main_left ul li').mouseover(function(){
                var index1=$(this).index();//记录是哪个li
                // alert(index1);
                $('#main_left ul li').eq(index1).children('a').mouseover(function(){//在这个li内的字标签a标签
                    var index=$(this).index();//记录a标签的号数
                    // alert(index);
                    $('#main_left ul li').eq(index1).children('a').eq(index-1).css('color','#B61B1F');//让这个li内的这个a变换颜色
                })
                $('#main_left ul li').eq(index1).children('a').mouseout(function(){
                    var index=$(this).index();
                    // alert(index);
                    $('#main_left ul li').eq(index1).children('a').eq(index-1).css('color','#800080');//同理,移出变另一种颜色
                })
    
            })
    })
    </script>
    </head>
    <body>
    <div id="main_left">
            <ul>
                <li>T恤<br/><a href="txu.html">森马</a><a  href="txu.html">花花公子</a><a href="txu.html">七匹狼</a></li>
                <li>衬衫<br/><a href="chenshan.html">太平鸟</a><a href="chenshan.html">海澜之家</a><a href="chenshan.html">金利来</a></li>
                <li>牛仔<br/><a href="niuzai.html">简约</a><a href="niuzai.html">休闲</a><a href="niuzai.html">文艺</a></li>
                <li>短裤<br/><a href="duanku.html">常规</a><a href="duanku.html">加厚</a><a href="duanku.html">超薄</a></li>
                <li>帽子<br/><a href="maozi.html">棒球帽</a><a href="maozi.html">鸭舌帽</a><a href="maozi.html">礼帽</a></li>
                <li>鞋子<br/><a href="xiezi.html">李宁</a><a href="xiezi.html">耐克</a><a href="xiezi.html">361</a></li>
            </ul>
        </div>
        
    </body>
    </html>
    
  • 相关阅读:
    Mybatis异常--java.lang.IllegalArgumentException: NO ENUM const class org.apache.ibatis.type.JdbcType.int
    JAVA(IO流)文件复制
    JAVA继承与覆写
    收藏一些是实用的小技巧
    利用JS生成01010101……长度可控的序列
    JS脚本收藏(一些实用的函数)
    利用JavaScript生成随机数字!
    JavaScript自学之数组排序
    前端开发自学之JavaScript——显示当前时间
    Spring Boot Sample 016之spring-boot-error-exception
  • 原文地址:https://www.cnblogs.com/lzzhuany/p/4621505.html
Copyright © 2011-2022 走看看