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="width: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="width: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="width: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="width: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'); //找父级里的子级
});
 


转载于:https://www.cnblogs.com/wolflower/p/6857067.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个默认显示第一个选项卡的鼠标移入选项卡实现: HTML部分: ```html <div class="tab"> <div class="tablinks" onmouseover="openTab(event, 'tab1')" id="defaultOpen">选项卡1</div> <div class="tablinks" onmouseover="openTab(event, 'tab2')">选项卡2</div> <div class="tablinks" onmouseover="openTab(event, 'tab3')">选项卡3</div> </div> <div id="tab1" class="tabcontent"> <h3>选项卡1</h3> <p>这里是选项卡1的内容</p> </div> <div id="tab2" class="tabcontent"> <h3>选项卡2</h3> <p>这里是选项卡2的内容</p> </div> <div id="tab3" class="tabcontent"> <h3>选项卡3</h3> <p>这里是选项卡3的内容</p> </div> ``` CSS部分: ```css /* 隐藏所有选项卡内容 */ .tabcontent { display: none; } /* 标签按钮样式 */ .tablinks { background-color: #f1f1f1; border: none; color: black; padding: 10px 20px; font-size: 18px; cursor: pointer; } /* 激活的标签按钮样式 */ .tablinks.active { background-color: #ccc; } /* 选项卡内容样式 */ .tabcontent { padding: 20px; border: 1px solid #ccc; } ``` JavaScript部分: ```javascript // 默认显示第一个选项卡 document.getElementById("defaultOpen").click(); function openTab(evt, tabName) { // 获取所有选项卡内容元素 var tabcontent = document.getElementsByClassName("tabcontent"); // 隐藏所有选项卡内容 for (var i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // 取消所有标签按钮的激活状态 var tablinks = document.getElementsByClassName("tablinks"); for (var i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // 显示当前选项卡内容 document.getElementById(tabName).style.display = "block"; // 激活当前标签按钮 evt.currentTarget.className += " active"; } ``` 这样就可以实现一个默认显示第一个选项卡的鼠标移入选项卡啦。注意,这里添加了激活状态的样式,以便区分当前处于哪个选项卡。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值