更多>
最新下载
jQuery鼠标悬停九宫格图片延伸效果
jQuery鼠标悬停九宫格图片延伸效果是一款鼠标悬停在任意一个宫格内,分别上下左右四个方向延伸出四个图片,且当前宫格内显示半透明链接效果。
0
2026-01-18
24小时阅读排行榜
- 1 mysql集合与表数据有什么关系_mysql数据组织方式解析
- 2 XML RPC是什么 XML RPC调用方法
- 3 雷神电脑播html5发热严重吗_雷神电脑控html5温法【防护】
- 4 c++中如何使用std::filesystem::last_write_time_c++获取修改时间【汇总】
- 5 css多个样式文件如何同时引入_通过多个link标签顺序加载
- 6 css min-height不起作用怎么回事_解析最小高度与盒模型关系
- 7 Laravel如何处理跨站请求伪造CSRF_Laravel排除CSRF验证的路由名单配置【技巧】
- 8 css 想让图片响应式加载不同尺寸怎么办_使用图片集配合不同分辨率显示
- 9 c++中如何实现红黑树_c++红黑树基本性质与插入逻辑
- 10 HTML input 怎么禁用浏览器自动填充(autocomplete 失效的几种情况)
- 11 PowerShell的Select-Xml命令怎么用
- 12 css 布局在不同浏览器显示不一致怎么办_通过 css 统一盒模型
- 13 css 想让透明度变化自然渐变怎么办_使用透明度过渡实现淡入淡出效果
- 14 如何实现时间范围查询_mysql项目时间字段用法
- 15 Three.js OrbitControls 双击重置后卡死问题的完整解决方案
更多>
最新教程
-
- Node.js 教程
- 15722 2025-08-28
-
- CSS3 教程
- 1545390 2025-08-27
-
- Rust 教程
- 22952 2025-08-27
-
- Vue 教程
- 25431 2025-08-22
-
- PostgreSQL 教程
- 21977 2025-08-21
-
- Git 教程
- 8987 2025-08-21
jQuery+左侧选项卡菜单点击切换代码
$(document).ready(function(){
function myfunction(li,li_a,menu_tab){
li.click(function(){
var index=$(this).index();
menu_tab.eq(index).addClass("active").siblings().removeClass("active");
li_a.removeClass("selected");
li_a.eq(index).addClass("selected").siblings().removeClass("selected");
});
}
myfunction($(".container .menu .ulmenu1 li"),$(".container .ulmenu1 li a"),$(".container .content .menu1 .tab"));
myfunction($(".container .menu .ulmenu2 li"),$(".container .ulmenu2 li a"),$(".container .content .menu2 .tab"));
myfunction($(".container .menu .ulmenu3 li"),$(".container .ulmenu3 li a"),$(".container .content .menu3 .tab"));
$(function(){ //ul/li的折叠效果
$(".menu > ul").eq(0).show();
$(".menu h3").click(function(){
//找menu对应的tab
$(".menu_tab > div").removeClass("active");
var val=($(this).next().attr('class'));
var menu_value=(val.substring(val.length-1));
$(".container .content .menu"+menu_value+" .tab:first-child").addClass("active");
$(".container .menu .ulmenu"+menu_value+" li>a").removeClass("selected");
$(".container .menu .ulmenu"+menu_value+" li a").eq(0).addClass("selected");//默认设置为被选中状态
$(this).next().stop().slideToggle();
$(this).siblings().next("ul").stop().slideUp();
});
function myfunction(li,li_a,menu_tab){
li.click(function(){
var index=$(this).index();
menu_tab.eq(index).addClass("active").siblings().removeClass("active");
li_a.removeClass("selected");
li_a.eq(index).addClass("selected").siblings().removeClass("selected");
});
}
myfunction($(".container .menu .ulmenu1 li"),$(".container .ulmenu1 li a"),$(".container .content .menu1 .tab"));
myfunction($(".container .menu .ulmenu2 li"),$(".container .ulmenu2 li a"),$(".container .content .menu2 .tab"));
myfunction($(".container .menu .ulmenu3 li"),$(".container .ulmenu3 li a"),$(".container .content .menu3 .tab"));
$(function(){ //ul/li的折叠效果
$(".menu > ul").eq(0).show();
$(".menu h3").click(function(){
//找menu对应的tab
$(".menu_tab > div").removeClass("active");
var val=($(this).next().attr('class'));
var menu_value=(val.substring(val.length-1));
$(".container .content .menu"+menu_value+" .tab:first-child").addClass("active");
$(".container .menu .ulmenu"+menu_value+" li>a").removeClass("selected");
$(".container .menu .ulmenu"+menu_value+" li a").eq(0).addClass("selected");//默认设置为被选中状态
$(this).next().stop().slideToggle();
$(this).siblings().next("ul").stop().slideUp();
});
});
这是一款jQuery+左侧选项卡菜单点击切换代码,点击左侧选项卡可进行菜单切换。
本站所有资源都是由网友投搞发布,或转载各大下载站,请自行检测软件的完整性!本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!如有侵权请联系我们删除下架,联系方式:admin@php.cn
