jquery插件实现面板切换效果

最新推荐文章于 2020-09-17 10:28:33 发布
置顶 最新推荐文章于 2020-09-17 10:28:33 发布
阅读量1.1k 收藏
点赞数
文章标签： jquery插件 stylesheet javascript xhtml div function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AFei_student/article/details/7404279
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="./js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">
$(function(){
    $("#tables").tabs({
        fx:{opacity:0.2}, //显示透明度的
        selected:3
        });
    });
</script>
</head>

<body>
<div id="tables">
    <ul>
        <li><a href="#tab-1">陌生人</a></li>
        <li><a href="#tab-2">黑名单</a></li>
        <li><a href="#tab-3">白名单</a></li>
        <li><a href="#tab-4">找死啊</a></li>
    </ul>
    <div id="tab-1">
        嘿嘿 哈哈  (*^__^*) 嘻嘻……
    </div>
     <div id="tab-2">
        啦啦啦啦啦  我我我我我我我我
    </div>
     <div id="tab-3">
        佳佳。。。。。I love you forever！！！
    </div>
    <div id="tab-4">
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;
    </div>
    
</div>
</body>
</html>


AFei_student
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery和CSS3超酷三面板幻灯片特效
12-11
这是一款效果非常酷的jQuery和CSS3三面板幻灯片特效插件。该幻灯片插件将一张图片分割为三部分，在幻灯片切换的时候，图片的每一部分都从不同方向进入显示，效果非常不错。
jquery好友面板切换
dxm809的博客
04-08 419
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;    &lt;title&gt;&lt;/title&gt;    &lt;meta charset="utf-8&q
jquery、js实现好友面板切换
tugangkai的专栏
09-17 419
好友面板切换示例 前端分别使用js和jquery实现。具体如下: js实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &
JQuery UI之(三)可切换面板——tabs
culous的博客
10-27 2734
一、          前言 Tabs组件的使用与dialog一样十分简单,  默认的配置即可实现最简单的tab, 通过设置更多的options可以实现更复杂的应用.   二、          直入主题 引入样式和js库：     link type="text/css" rel="Stylesheet" href="Css/redmond/jQuery-ui-1.7.2.cus
jQuery----左侧导航栏面板切换实现
01-17 1545
页面运行结果： 点击曹操　　　　　　　　　点击刘备　　　　　　　　点击孙权　　　　　　　　原图 需求说明：原图如上所示，点击一方诸侯的时候，显示该诸侯手下猛将，其他诸侯手下猛将隐藏 页面结构： 实现思路： ①给大的li注册鼠标点击事件 当鼠标点击时...
jQuery权威指南-源代码
11-11
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
一款jQuery插件slide幻灯片切换图片宽高自适应 74.一款jQuery漂亮淡出淡入焦点大图切换源码 75.一款jquery缩略图商品切换放大展示功能插件 76.一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery...
SHINE for reddit (unofficial)-crx插件
03-08
再次添加侧边栏-新设置使侧边栏始终处于正确位置（因此您无需向上滚动即可看到它）-现代白色和现代风格现已成为默认配置-主题设置面板的较小更改-现在作者悬停了正在正确设置主题-设置面板现在正在正确设置主题-添加...
jQuery实现切换面板
不会说相声的dancer不是好码农的博客
08-12 248
文章目录 jQuery实现切换面板 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .tabs>ul{ list-style: none; height: 50px; line-height: 50px; backgro
Jquery实现小页面切换（参考）
qq_42769197的博客
10-22 1536
html代码： &lt;div class="main"&gt; &lt;div class="content"&gt; &lt;ul id="project" class="project"&gt; &lt;li id="hb" style="cursor: pointer;"class="s
js jquery 写 面板 跳转 切换 有动画效果
php_jiang的专栏
03-28 1820
无标题文档 //当窗体加载完毕的时候， 触发该匿名函数 //$(document)  把dom对象转换成jqery对象 $(function (){ $("#tabs").tabs({ event:"mouseover", //disabled:[1]//面板不可用 collapsible:  true, fx:{ opacity:"toggle"}, se
jquery 点击切换面板及图标
Zoe_Wang_ing的专栏
12-03 2501
将背景颜色换成背景图 无标题文档 .finance{ border-bottom:none; } .finance dd{ line-height:48px; color:#0e4f71; padding:5px 0; border-bottom:1px solid #eaeaea; background:#ffffff; } .finance dd p{ paddin
jquery点击图标来回切换的几种方法（如开关按钮）
热门推荐
heshichao666的博客
09-18 1万+
1.$(".img").click(function(){ if(this.src.search("../static/img/off.png")!=-1){ this.src="../static/img/on.png"; }else{ this.src="../static/img/off.png" }
jquery实现tab页切换
qq_21719805的博客
06-20 1156
关联设置       &lt;h2 class="h2_ch"&gt;&lt;span id="tabs" class="l"&gt;        &lt;a href="javascript:void(0);" ref="#tab_1" title="基本信息" class="here"&gt;基本信息&lt;
jquery实现折叠面板
u014469537的博客
01-25 955
服务管理   等待提交   等待发布   正式项目   点此新增 更新流程   后台搜索   更新流程 FAQ管理   等待提交   等待发布   正式项目   点此新增 下载管理   等待提交   等待发布   正式项目   点此新增
jquery实现折叠面板的功能
weixin_38996069的博客
01-07 579
通过使用滑动效果，在显示和隐藏状态之间切换 slideToggle() （这个效果很好看，但是我们一般习惯性使用了toggle方法）
html切换面板
Super_Gods的博客
08-18 3239
切换面板 自动切换 手动切换<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq
用jquery实现对应切换效果
最新发布
06-01
好的，我可以为你介绍一下如何利用 jQuery 实现对应切换效果。 首先，我们需要在 HTML 文件中添加对应的标签和内容，比如使用 `<ul>` 和 `<div>` 标签： ```html <ul> <li class="tab active">Tab 1</li> <li class="tab">Tab 2</li> <li class="tab">Tab 3</li> </ul> <div class="tab-content active">Content 1</div> <div class="tab-content">Content 2</div> <div class="tab-content">Content 3</div> ``` 其中，`<li>` 标签表示每个选项卡，`<div>` 标签表示对应的内容。注意，我们需要为第一个选项卡和对应的内容添加 `active` 类，表示默认显示。 然后，我们可以使用 jQuery 来实现对应切换效果。具体来说，我们需要为每个选项卡添加点击事件，当点击时，切换到对应的内容。 ```js $(document).ready(function() { // 获取所有选项卡和对应的内容 var tabs = $('.tab'); var contents = $('.tab-content'); // 为每个选项卡添加点击事件 tabs.click(function() { // 获取当前点击的选项卡的索引 var index = tabs.index(this); // 切换选项卡的 active 类 tabs.removeClass('active'); $(this).addClass('active'); // 切换对应的内容的 active 类 contents.removeClass('active'); contents.eq(index).addClass('active'); }); }); ``` 在上面的代码中，我们首先使用 `$('.tab')` 和 `$('.tab-content')` 获取所有的选项卡和对应的内容。然后，我们为每个选项卡添加 `click` 事件，当点击时，获取当前选项卡的索引，然后切换对应的内容的 `active` 类。 这样，我们就成功利用 jQuery 实现了对应切换效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值