zoukankan      html  css  js  c++  java
  • js样式,默认显示第一个

    1、
    $('.z_scly_li li').mouseover(function(){
    $(this).find('a').addClass('z_scly_li_on').parent().siblings().find('a').removeClass('z_scly_li_on');
    });

    样式:
    .z_scly_li_on{
    color:#1565c0!important;
    text-decoration:underline!important;
    }
    HTML:
    <ul class="z_scly_li">
    <li><a class="z_scly_li_on" href="">心理箱庭疗法</a></li>
    <li><a href="">心理咨询</a></li>
    <li><a href="">心理测量</a></li>
    <li><a href="">个人成长</a></li>
    <li><a href="">案例督导</a></li>
    <li><a class="z_connect f16" href="">联系咨询</a></li>
    </ul>
    2、
    $(".qtzjtj_con").find("li").hover(function(){
    $(this).addClass("on").siblings().removeClass("on");
    });
    $(".qtzjtj_con").find("li").mouseover(function(){
    $(this).find('img').addClass("onn");
    }).mouseout(function(){
    $(this).find('img').parent().siblings().find('img').removeClass("onn");
    });

    HTML:
    <ul class="qtzjtj_con text-center">
    <li class="on"><img class="img-circle onn" src="static/images/图层 3.png" style="168px;height:168px;border:1px solid #e1e1e1;"/>
    <p style="margin-top:130px;"> <h4 class="f21 f21_h4">蔡忠准</h4><span class="f18">国际权威催眠大师</span></p></li>
    <li><img class="img-circle" src="static/images/图层 3.png" style="168px;height:168px;border:1px solid #e1e1e1;"/>
    <p style="margin-top:130px;"><h4 class="f21 f21_h4">蔡忠准</h4><span class="f18">国际权威催眠大师</span></p></li>
    <li><img class="img-circle" src="static/images/图层 3.png" style="168px;height:168px;border:1px solid #e1e1e1;"/>
    <p style="margin-top:130px;"><h4 class="f21 f21_h4">蔡忠准</h4><span class="f18">国际权威催眠大师</span></p></li>
    <li><img class="img-circle" src="static/images/图层 3.png" style="168px;height:168px;border:1px solid #e1e1e1;"/>
    <p style="margin-top:130px;"><h4 class="f21 f21_h4">蔡忠准</h4><span class="f18">国际权威催眠大师</span></p></li>
    </ul>

    样式:
    .on{
    border:1px solid #1e88e5!important;
    }
    .onn{
    border:1px solid #1e88e5!important;
    }

    3、
    $('.z_hyzc1>div').mouseover(function(){
    $(this).addClass('z_on').siblings().removeClass('z_on'); //找同级的
    $(this).addClass('z_on').parent().siblings().find('div').removeClass('z_on'); //找父级里的子级
    });
     


  • 相关阅读:
    css3优惠券
    js实现简单的评论和回复功能(数组版)
    ajax获取json形式得题目和答案 实现答题功能
    SEO搜索引擎优化(转)
    iOS 读取大文件时候的注意点
    【转】通过自定义的URL Scheme启动你的App
    友盟分享需要注意的事项
    iOS真机调试引入第三方库(如友盟等)编译时候,出现错误提示
    重写navigationController的push方法后,出现卡顿现象
    通过应用打开系统中设置(定位权限,摄像头权限等等)
  • 原文地址:https://www.cnblogs.com/wolflower/p/6857067.html
Copyright © 2011-2022 走看看