分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

js 切换tab

发布时间:2023-09-06 02:28责任编辑:林大明关键词:js

$( "#tabOrder" ).find( "li:eq(1)" ).addClass( ‘tabs-selected‘ ).siblings().removeClass( ‘tabs-selected‘ );
???????????????????????$( "#tabSH" ).parent().show();
???????????????????????$( "#tabSH" ).parent().siblings().hide();

1.display:none 属性

("#id").css(‘display‘,‘none‘); 
$("#id").css(‘display‘,‘block‘); 

$("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的

2.如何选择ul下不同的li

$("ulli:first")这个是获取每个ul的第一个li元素

使用eq选择器获取

语法:$(":eq(index)") index值从0开始。
获取第二个 $("ul li:eq(1)")
获取第三个 $("ul li:eq(2)")
3.siblings 获取同胞元素
//获取点击的元素给其添加样式,讲其兄弟元素的样式移除
    $(this).addClass("active").siblings().removeClass("active");
4.纯CSS组成的Tab控件思路:
a.Tab上部可用不同的button或者超链接表示,使有点击效果
b.下面可用不同的div显示,用div的hide和show实现Tab页的切换

js 切换tab

原文地址:https://www.cnblogs.com/CCNewLive/p/10219246.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved