zoukankan      html  css  js  c++  java
  • 类似JQuery siblings()的应用

    <div class="course_date">
                <div class="date_month">2017/11</div>
                <ul class="date_day clearfix">
                    <li>
                        <h2></h2>
                        <p class="current_date">26</p>
                    </li>
                    <li>
                        <h2></h2>
                        <p>27</p>
                    </li>
                    <li>
                        <h2></h2>
                        <p>28</p>
                    </li>
                    <li>
                        <h2></h2>
                        <p>29</p>
                    </li>
                    <li>
                        <h2></h2>
                        <p>30</p>
                    </li>
                    <li class="grey_dot">
                        <h2></h2>
                        <p>1<i class="grey_d"></i></p>
                    </li>
                    <li style="margin-right: 0rem;" class="grey_dot">
                        <h2></h2>
                        <p>2<i class="grey_d"></i></p>
                    </li>
                </ul>
            </div>
    <script type="text/javascript">
        $(function(){
            $(".date_day li").click(function(){
                $(this).find("p").addClass("current_date");
                $(this).siblings('li').find("p").removeClass("current_date");
                $(this).siblings(".grey_dot").find("i").addClass("grey_d"); //important
                if ($(this).hasClass("grey_dot")) {
                    $(this).find("p").addClass("current_date");
                    $(this).siblings('li').find("p").removeClass("current_date");
                    $(this).find("i").removeClass("grey_d");
                    $(this).siblings(".grey_dot").find("i").addClass("grey_d")
                }
            })
        })
    </script>

    1、2下面的灰色点需要li点击时隐藏,并且背景颜色为红色,字体为白色,离开时显示,可以参考以上方法

    注意: $(this).siblings(".grey_dot").find("i").addClass("grey_d");
  • 相关阅读:
    PHP学习当中遗漏的知识点
    sql必知必会(第四版) 学习笔记
    servlet 笔记
    sql server 快捷键
    233
    第 四 课 数据类型
    第三课 go语言基础语法
    第二课 go语言的结构
    第 1 课 Go 简介
    linux 学习 查看文件占用空间大小
  • 原文地址:https://www.cnblogs.com/jvziking/p/8024306.html
Copyright © 2011-2022 走看看