超简单的网页选项卡---jQuery

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页选项卡</title>
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
var $li=$(".tab_menu ul li");
$li.click(function(){
$(this).addClass("selected")
.siblings().removeClass("selected");
var index=$li.index(this);
$(".tab_box>div")
.eq(index).show()
.siblings().hide();
});

});
</script>
<style>
*{margin:0;padding:0;}
.tab{border:1px solid #000;width:600px;margin:0 auto;padding:10px;}
.tab_menu ul li{display:inline-block;width:60px;height:30px;line-height:30px;background:#eee;color:#000;text-align:center;}
.tab_menu ul li.selected{background:#999;}
.tab_box{height:400px;border:1px solid #d7d4e9;}
.tab_box .hide{display:none;}

</style>

</head>

</body>
</html>

转载于:https://www.cnblogs.com/ll-taj/p/5828482.html

超简单的网页选项卡---jQuery相关推荐

java jsp网页计算器_使用JSP制作一个超简单的网页计算器的实例分享
实现一个简单的计算器程序,要求:使用jsp+javabean模式实现. 项目源代码如下: 文件:calculator.jsp 简单的计算机进行计算 --%> cal.calculate(); ...
超简单破解网页加密源代码
有些网站的源代码是经过加密的,如何快捷的破解这些加密的代码呢?告诉你一个简单而有效的方法. 在地址栏或按Ctrl+O,输入: javascript:s=document.documentElement ...
网页设计HTML如何制作选项卡,jQuery制作网页版选项卡
网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情.今天就来分享一个网页选项卡的制作小技巧. ◦引入所需库 ◦选项卡原理 ◦业务核心 ◦完整小 ...
JQuery 网页选项卡制作
网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情.今天就来分享一个网页选项卡的制作小技巧. 引入所需库选项卡原理业务核心完整小例子引 ...
免费的html空间,免费HTML网页空间（每月200 GB 流量托管静态网页超简单）
免费HTML网页空间(每月200 GB 流量托管静态网页超简单) 二十几年前有个相当知名的网页空间服务「GeoCities」,可以说是早期网站服务的始祖,当年有非常多类似的网页托管服务,让使用者将制作 ...
Neocities 免费HTML 网站空间，每月200 GB 流量托管静态网页超简单
Neocities 免费HTML 网站空间,每月200 GB 流量托管静态网页超简单-第1张图片-小蜜蜂免费云主机二十几年前有个相当知名的网页空间服务「GeoCities」,可以说是早期网路服务的始 ...
【前端实例代码】Html5+css3+JavaScript实现新拟态新拟物风格(Neumorphism)图标按钮动效网页效果~手把手教学~新手必会~超简单 ~
b站视频演示效果: 效果图: 完整代码: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)动画特效图标网页效果！前端开发网页设计基础入门教程！超简单~
b站视频演示效果: [web前端特效源码]Html5+css3实现新拟态新拟物风格(Neumorphism)网页图标动画效果!手把手教学!新手必会!超简单 ~ 效果图: 完整代码: <!DOCT ...

超简单的网页选项卡---jQuery

超简单的网页选项卡---jQuery相关推荐

最新文章

热门文章