左右布局滑动切换Tab选项卡.zip资源-CSDN文库

共7个文件

png：2个

js：2个

css：1个

版权申诉

jQuery

html5

javascript

140 浏览量 2022-11-26 11:03:14 上传评论收藏 95KB ZIP 举报

在前端开发中，"左右布局滑动切换Tab选项卡"是一种常见的用户界面设计，它能够有效地组织和展示信息，提高用户体验。这个主题涉及到的技术主要包括jQuery、HTML5、CSS以及JavaScript，这些都是构建现代网页应用的基础。 HTML5是网页结构的基础，用于定义页面的各个部分。在创建Tab选项卡时，我们通常会用`<div>`标签来创建各个Tab容器，`<ul>`和`<li>`来构建选项卡的列表，每个`<li>`代表一个选项卡标题。例如： ```html <div class="tab-container"> <ul class="tabs"> <li class="tab active">选项卡1</li> <li class="tab">选项卡2</li> <li class="tab">选项卡3</li> </ul> <div class="tab-contents">  </div> </div> ``` 接着，CSS（层叠样式表）用于美化和布局。我们可以利用CSS选择器来设置选中状态的样式，控制选项卡的外观和位置。对于左右滑动效果，可以使用`transform`属性和`transition`属性来实现平滑过渡。例如： ```css .tabs { display: flex; overflow-x: auto; } .tab { width: 100px; transition: transform 0.3s; } .active { transform: translateX(0); } .inactive { transform: translateX(-100%); } ``` 然后，JavaScript（在这里可能是jQuery）用于处理交互逻辑。例如，当用户点击某个选项卡时，我们需要更新选中状态，改变对应的Tab内容可见性，并调整选项卡的滑动位置。jQuery提供了便利的DOM操作方法，如`click()`事件监听，`addClass()`和`removeClass()`添加或移除类名，以及计算和修改元素样式的方法。例如： ```javascript $('.tabs').on('click', '.tab', function() { $(this).siblings('.active').removeClass('active inactive'); $(this).addClass('active'); var index = $(this).index(); $('.tab-contents > div').eq(index).show().siblings().hide(); }); ``` 可能还需要一些优化，比如使用CSS3的动画来提高滑动效果的流畅度，或者考虑响应式设计，使Tab组件在不同屏幕尺寸下都能良好展示。 "左右布局滑动切换Tab选项卡"的设计和实现涵盖了前端开发中的多个重要方面，包括HTML5的语义化标签、CSS的布局和动画技术，以及JavaScript（jQuery）的事件处理和DOM操作。通过熟练掌握这些技能，开发者可以创建出更加动态、用户友好的网页应用。

资源推荐

资源详情

资源评论

收起资源包目录

左右布局滑动切换Tab选项卡.zip （7个子文件）

左右布局滑动切换Tab选项卡

jiaoben2349

css

style.css 3KB

images

gdkc.png 5KB

js.png 5KB

index.html 12KB

event.js 3KB

tween.js 6KB

左右布局滑动切换Tab选项卡.jpg 89KB

<!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=gb2312" /> <title>左右布局滑动切换Tab选项卡 - 网页模板</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="js/event.js"></script> <script src="js/tween.js"></script> </head> <body> <div class="tabmain"> <div id="outerWrap"> <div id="sliderParent"></div> <div class="blueline" id="blueline" style="top: 0px; "></div> <ul class="tabGroup"> <li class="tabOption selectedTab">JavaScript培训</li> <li class="tabOption">主体课程</li> <li class="tabOption">高端课程</li> <li class="tabOption">就业传奇</li> <li class="tabOption">珠峰学生会</li> <li class="tabOption">讲师招聘</li> <li class="tabOption">远程教育</li> </ul> <div id="container"> <div id="content"> <div class="tabContent selectedContent"> <h3 style="">我们专注JavaScript培训</h3> <dl> <dt><span class="high">教育理念：</span></dt> <dd>认识到每个人的优势和价值，进行不同的指导和引导、推荐到更适合的平台。我们不仅仅是努力，不仅仅是传授技术，更重要的是：<span class="colorange">我们是发现你的伯乐！</span></dd> </dl> <dl> <dt><span class="high">传奇就业：</span></dt> <dd> <p>超过50%的学员工资翻倍或进入百度、新浪、腾讯等知名公司！</p> </dd> </dl> <dl> <dt><span class="high">强悍课程：</span></dt> <dd> <p>原生javaScript、算法及编程思想、设计模式、Ajax后台技术,HTML5+CSS3移动端客户端开发，Node.js、jQuery、AngularJS、Backbone.js框架讲解 </p> </dd> <dd> <p><a target="_blank" class="fbold colorange" href="http://www.moobnn.com">查看2014年珠峰培训JavaScript培训课程大纲</a></p> </dd> <dd> <p><img src="images/js.png" alt=""></p> </dd> </dl> <dl> <dt><span class="high">特色</span></dt> <dd> <p><a href="###">自编的针对性教材</a><a href="http://www.moobnn.com">超过300讲深度视频</a><a href="###">海量面试题讲解</a><br> <a href="###">直接进百度等公司的推荐机会</a></p> </dd> </dl> </div> <div class="tabContent"> <h3>内容：全面、系统、深入的JavaScript培训课程</h3> <dl> <dt>知识点纵向大纲：</dt> <p><a target="_blank" href="http://www.moobnn.com">查看2014年珠峰培训JavaScript课程大纲</a></p> </dl> <dl> <dt class="high">重点模块式课程大纲</dt> <dd>1、实用至上，高效为王的DOM库（单例模式）</dd> <dd>2、比jQuery动画还精彩的TWEEN算法动画库</dd> <dd>3、使用观察者设计模式，从原理入手的事件库</dd> <dd>4、开发自己的Ajax库</dd> <dd>5、模块化开发之一：选项卡框架</dd> <dd>6、模块化开发之二：可扩展自定义事件的完美拖拽框架</dd> <dd>7、模块化开发之三：弹出层框架</dd> </dl> <dl> <dt class="high">特色</dt> <dd> <p><a href="###">自己编写的教材</a><a href="http://www.moobnn.com">超过300讲的视频</a><a href="###">海量面试题讲解</a></p> <p><a href="###">直接进百度等公司的推荐机会</a></p> </dd> </dl> </div> <div class="tabContent"> <h3>把JavaScript进行到底！</h3> <dl> <dt>最大亮点：</dt> <dd>主流的、引领前沿的新技术，邀请知名公司的前端技术大牛讲解的饕餮大餐，可谓是群星荟萃！我们的目标就是：以珠峰为起点，让你飞的更高！</dd> </dl> <dl> <dt>高端课程：</dt> <dd> <p>1、HTML5移动端开发</p> <p>2、CSS3及响应式布局</p> <p>3、Node.js</p> <p>4、MVC富客户端开发</p> <p>5、angularJS框架</p> <p><img src="images/gdkc.png" alt=""></p> </dd> </dl> </div> <div class="tabContent"> <h3>就业好才是硬道理</h3> <dl> <dt>就业是一个培训班最有说服力的结果</dt> <dd> <p>网站做的再好，老师吹的再玄乎，看了就业后的选择，才是理性选择。</p> </dd> </dl> <dl> <dt>奇迹是努力的代名词：就业背后是汗水.</dt> <dd>以强悍的课程体系为依托，以珠峰同学会为人脉。看一个培训机构的就业，是对一个培训机构最理性的评价。就业不好的培训班，都是在骗钱！！</dd> </dl> <dl class="witness"> <dt>奇迹的见证：</dt> <dd> <p><span class="ele"></span><a target="_blank" href="http://www.moobnn.com"><em>我和我的小伙伴们都惊呆了：</em>2014新年伊始，四个同学入职进百度</a></p> <p><span class="ele"></span><a target="_blank" href="http://www.moobnn.com"><em>学完之后工资真的能翻一翻吗？</em>这已经不是个例</a></p> <p><span class="ele"></span><a target="_blank" href="http://www.moobnn.com"><em>逆天了：</em>一个班上70%的同学工资翻倍或进百度搜狐等公司</a></p> <p><span class="ele"></span><a target="_blank" href="http://www.moobnn.com">看我们有多少同学在百度新浪网易腾讯这些大公司</a></p> <p><span class="ele"></span><a target="_blank" href="http://www.moobnn.com"><em>看我们的学员有多牛：</em>应届毕业生，一样也成为百度正式员工</a></p> <p><span class="ele"></span><a target="_blank" href="http://www.moobnn.com"><em>我们的在线培训同样给力：</em>上海美女月薪超10K进外企</a></p> </dd> </dl> </div> <div class="tabContent"> <h3>珠峰学生会，大家好才是真的好</h3> <dl> <dt>学生会的昨天</dt> <dd> <p>珠峰的学生永远是珠峰最宝贵的资源，是珠峰培训发展和壮大的依托。昨天，他们陪珠峰从创业到发展，他们没有嫌弃那个弱小珠峰，他们没有嫌弃那个像农村大叔一样的珠峰老师，没有嫌弃那两间简陋的教室，一起走过最艰难的岁月。</p> </dd> </dl> <dl> <dt>学生会的今天</dt> <dd> <p>今天，同学们遍布北京互联网公司，在百度、腾讯、新浪、搜狐等公司的就有一百多人。珠峰培训传统，一向是学习上老同学带新同学，在工作机会上老同学推荐新同学.正因为广大同学，珠峰培训才有了这么丰富的讲师资源，才有了更多更广的就业渠道。</p> </dd> </dl> <dl> <dt>学生会的明天</dt> <dd> <p>明天，我们会更好！！珠峰和所有同学共同成长！！我们在一起战斗，不孤单！</p> </dd> </dl> <p><span class="high" style="margin:0 10px;">不定期的组织活动</span><span class="high" style="margin:0 10px;">前沿技术分享</span><span class="high" style="margin:0 10px;">工作的交流推荐平台</span><span class="high" style="margin:0 10px;">展示自己的机会</span></p> <p><a>学生是珠峰的信仰。每一位同学都是佛，我只是一位拜佛人！</a></p> </div> <div class="tabContent" style=""> <h3>珠峰培训需要优秀的你加入</h3> <dl> <dt>招聘兼职讲师</dt> <dd>长期招聘HTML5移动端开发讲师、node.js讲师、其它经验丰富的JS开发讲师</dd> </dl> <dl> <dt>招聘要求：</dt> <dd> 1、有一颗慈悲心。佛说：知众生之苦,勇入苦海，以救众生出苦海为乐，是慈悲心。报班的同学，多数没有编程基础，讲师应深刻体会初学者的心理，耐心的有针对性的鼓励、讲解和辅导！</dd> <dd>2、有一颗平等舍与的心。报班的同学成绩不一，对成绩好的莫偏爱，对成绩不好的冷淡。而应该是让成绩好的更上一层楼，让成绩不好的有信心提高自己。</dd> <dd>3、有扎实的代码基本功，丰富的开发经验<

评论收藏

内容反馈

版权申诉