给页面某位置添加额外的CSS样式(添加、删除或者替换)
  • 首页 > 电脑网络
  • 作者: Joseffu
  • 2015年7月25日 17:41 星期六
  • 浏览:4001 次
  • 字号:   
  • 评论:0 条  
  • 时间:2015-7-25 17:41   浏览:4001  

    举例,实际应用时依葫芦画瓢,拿来主义直接可用:

    删除 id=index 位置的 class=nav 属性,添加 class=cur 属性:

    <script>
    $(document).ready(function(){
    $("#index").eq(0).removeClass("nav").addClass("cur");
    });
    </script>

    在 id=index 的位置添加 class=cur 属性:

    <script>
    $(document).ready(function(){
    $("#index").eq(0).addClass("cur");
    });
    </script>

    在 id=index 的位置删除 class=nav 属性:

    <script>
    $(document).ready(function(){
    $("#index").eq(0).removeClass("nav");
    });
    </script>


    如果该位置 id 属性被占用,那么可以使用定位方式,通过 class 属性找到该位置所在,例如:


    <script>
    $(document).ready(function(){
    $(".nav .menu ul li").eq(0).addClass("cur");
    });
    </script>


    另外 CSS 中的伪类 :first-child 和 :last-child 也可以起到类似作用:

    :first-child 用来定义选择器元素集合中的第一个元素的样式;:last-child 用来定义选择器元素集合中的最后一个元素的样式;

    若定义循环代码中任意一个或多个元素的样式,则可以用到 :nth-child(N),N 是任意数字,用来表示第N个元素的样式,但是有个缺点,比如 p:nth-child(2),这个只会对第2个元素且这个元素中包括 p 标签,才可以生效,如果循环前面出现了其他如 span em li 等标签占用第2个位置,那么这个样式是无效的,这时候要用到 p:nth-of-type(2),使用这个样式,无论前面出现多少其他元素,只会对第2个p 重新定义样式。

    p:nth-child(odd){background:#f00;}
    p:nth-child(even){background:#00f;}


    这个用来定义p标签里奇数行(odd)和偶数行(ever)的背景色。

    以上方法对于不遵循循环规则的CSS样式,非常实用。

     

  • 本文没有标签
    昵称  邮箱  主页 
    表情1 表情2 表情3 表情4 表情5 表情6 表情7 表情8 表情9 表情10 表情11 表情12 表情13 表情14 表情15 表情16 表情17 表情18 表情19 表情20 表情21
    56 + 26 =
    Copyright © 2004-2022  Joseffu Online 博客首页 鲁ICP备2021023008号-1 繁体中文
  • 日志:290 篇
  • 评论:209 条
  • 微语:22 条
  • 友链:18 个
  • 分类:5 个
  • 标签:29 个
  • 建站:2004-11-22

    已运行