tabs选项卡切换效果（jquery版）

以前写过一篇 tabs选项卡切换效果，不过是用原生 javascript 写的，最近在学习 jquery，今天抽空用 jquery 重写了这个效果。

效果图如下：

html 代码如下：

<!DOCTYPE HTML>
<html lang="en-US">
<head><meta charset="UTF-8"/><title>选项卡（jquery版）</title><link rel="stylesheet" type="text/css" href="css/base.css" media="all"/><style type="text/css">.tabs{width:500px;margin:100px auto;}.tabs_menu{font-size:0;}.tabs_menu a{padding:5px;border:1px solid blue;font-size:12px;margin-left:10px;background:#ECECEC;float:left;}.tabs_menu .selected{background:white;border-bottom:1px solid white;position:relative;}.tabs_content{border:1px solid blue;padding:10px;margin-top:-1px;}</style>
</head>
<body><div class="tabs"><h2 class="tabs_menu clearfix"><a href="javascript:;" class="selected">新闻</a><a href="javascript:;">体育</a><a href="javascript:;">娱乐</a></h2><div class="tabs_content_wrap"><div class="tabs_content">新闻新闻新闻新闻新闻新闻</div><div class="tabs_content hide">体育体育体育体育体育体育</div><div class="tabs_content hide">娱乐娱乐娱乐娱乐娱乐娱乐</div></div></div>
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var $menu = $('.tabs > .tabs_menu a');
$menu.click(function(){$(this).addClass('selected').siblings().removeClass('selected');var index = $menu.index(this);$('.tabs_content_wrap > .tabs_content').eq(index).show().siblings().hide();
});
</script>

小提示：如果使用 jquery，则需要引入 jquery 库。

PS：以上是本人通过所学的 jquery 知识，随意写的一些效果。

tabs选项卡切换效果（jquery版）相关推荐

Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
vue 选项卡可以滑动_vue实现选项卡及选项卡切换效果
这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目中需要实现的一些效果拆分成模块.你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查,再回 ...
android 页卡切换实现,TabLayout+ViewPager实现选项卡切换效果
原来项目中一直使用tabhost做切换效果,最近在整理代码,决定放弃tabhost,使用google自带的切换布局TabLayout . 其实TabLayout实现切换效果还是蛮简单的,跟tabpag ...
html首页 slider图片切换效果,jQuery插件Slider Revolution实现响应动画滑动图片切换效果...
jQuery插件Slider Revolution实现响应动画滑动图片切换效果 2018-12-31 编程之家 https://www.jb51.cc 这是一款非常强大的内容切换插件,它基于jQuer ...
编程练习--简单实用的选项卡切换效果
有网友私信我,说我前几篇写编程练习的例子让他们感觉我写代码的方式和他们不一样,让他们很受启发,希望我多写一些这样的例子.他们帮我总结了一下,主要表现在以下三个方面: 1. 代码外观整洁清爽. 2.喜欢 ...
js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...
qt tablewidget 实现tab来回切换_原生JS实现TAB选项卡切换效果
插件化写法: HTML: tab1 tab2 tab3 tab4 tab5 页面1 页面2 页面3 页面4 页面5 css: .wrap{height:500px;width:80%;margin:5 ...
[分享]多个选项卡切换效果
实现的效果图: 鼠标经过选项卡,弹出相对应的内容,选项卡个数不限: 1.html <div class="box" id="box"> <dl ...
JavaScript 实例：当当网首页选项卡切换效果
关键代码: <script type="text/javascript"> function showMe(index) {//book_type_out是类名,类名绑 ...

tabs选项卡切换效果（jquery版）

tabs选项卡切换效果（jquery版）相关推荐

最新文章

热门文章