js-tab选项卡

2024-10-26 23:40:28

说道tab选项卡,顾名思义，就是切换不同内容分类，想必学过前端的都知道，tab有很多方法可以实现，最近刚跟师傅学了一种，感觉很简便，很实用哦。

一、先看一下结果

二、可以根据图来布局，首先上面标签和下面内容，

需要注意的是点击上面a标签的链接和下面div的id一一对应起来，

三、就是最重要的js部分了。

这个地方可以分几个阶段去思考

1.首先得有事件去触发点击

2.获取与内容对应a标签的href,这样就可以对下面进行显示或隐藏，

3.通过唯一的class --> active 来切换你想要的内容

四、加上css,这样就差不多完成了

这里根据需求自己定吧，重点在js

五、这样一个简单的小程序差不多就完成了。但是自己写的代码得负责到底，所以测试也是相当重要的，

1.首先，点击的选项会有偏差，所以我们要适当的加些判断，只有点击A标签的时候才能触发

注意：tagName 一定要大写比如：A 标签

2.还有一个地方需要优化，你会发现，现在在第一个标签上，如果在点击当前的，程序还会执行一遍，虽然你看不到，所一这个最好优化一下

点击的时候先判断一下就好啦。

下面附上我的源码，希望大家一起学习。请大家多多指教，随时留言回复，

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>tab选项卡</title>
  <style type="text/css">
   *{
    font-family: simhei;
   }
   .tab-group{
    padding: 1em 0em;
   }
   .tab-group>a{
    padding: 1em 2em;
    color: #666;
    text-decoration: none;
   }
   .tab-group>.active{
    padding: 1em 2em;
    background: #999;
    color: #fff;
   }
   .content-group{
    width: 31.7%;
    height: 10em;
    background: #999;
    color: #fff;
   }
   .content-group>.content-item{
    display: none;
   }
   .content-group>.active{
    display: inline-block;
   }
  </style>
 </head>
 <body>
  <nav class="tab-group">
   <a href="item01" rel="external nofollow" class="tab-item active">电脑</a>
   <a href="item02" rel="external nofollow" class="tab-item">手机</a>
   <a href="item03" rel="external nofollow" class="tab-item">平板</a>
  </nav>
  <div class="content-group">
   <div class="content-item active" id="item01">联想</div>
   <div class="content-item" id="item02">小米</div>
   <div class="content-item" id="item03">苹果</div>
  </div>
 </body>
</html>
<script type="text/javascript">
 document.querySelector(".tab-group").addEventListener('click',function(event){
  var target = event.target;
  //点击选项
  if(target.tagName === 'A' && ~target.className.indexOf('tab-item')){
   event.preventDefault();

   if(~target.className.indexOf('active')){
    return;
   }
   var href = target.getAttribute('href');//获取点击的目标标志
   //TODO 切换选项
   var activeTab = document.querySelector(".tab-group>.active");
   activeTab.className = activeTab.className.replace(' active', '');
   target.className = target.className + ' ' + "active";
   //TODO 选项对应的内容切换
   var activeContent = document.querySelector('.content-group>.active');
   activeContent.classList.remove('active');
   var contentElem = document.getElementById(href);
   contentElem.classList.add("active");
  }
 },false);
</script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

完美实现js选项卡切换效果(二)

本文实例为大家分享了js选项卡切换的具体代码,供大家参考,具体内容如下通过设置定时器实现延时0.5s切换,一个重要的技巧是定义了一个that变量来存放当前指针this. 之所以不能在这直接引用this是因为setTimeout是window对象,用this的话会指向定时器,所以要在前面定义一个变量. 还要注意调用定时器前要判断是否存在准备执行的定时器. 效果如图: 具体代码: <!DOCTYPE html> <html> <head lang="en"&
Vue.js组件tab实现选项卡切换

本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:
js鼠标经过tab选项卡时实现切换延迟

偶然间在浏览网页时,发现这样的效果.当鼠标不经意间滑过tab时并不会切换,当鼠标停留在上面一段时候后才会切换. 个人觉得用户体验不错,优点是1.当用户只是滑过标签,并不需要切换,而此时如果切换标签需要请求数据时,会避免不必要的异步请求:2.避免页面在用户不需要的时候切换跳动,影响用户体验. 网上查阅了几个方法,发现下面的方法更简洁有效.整理下来,供以后参考. 其中的重点是那段js代码:原理是,通过hover的时候设置定时器,延迟执行切换方法,离开时,清楚计时器.当hover的时间小于延迟时间时,
JS使用面向对象技术实现的tab选项卡效果示例

本文实例讲述了JS使用面向对象技术实现的tab选项卡效果.分享给大家供大家参考,具体如下: 运行效果图如下: 代码如下: html: <ul class="scrollUl"> <li id="m01" class="sd01" value="0"><a href="#" rel="external nofollow" rel="external
js编写选项卡效果

本文实例为大家分享了js选项卡效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin:0; padding:0; } .box{ margin:50px; } .box div{ display:none; width: 200px; hei
Vue.js tab实现选项卡切换

本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css" rel=&quo
使用vue.js写一个tab选项卡效果

通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,但是在vue.js中,我们能不去操作dom我们就尽量不操作dom,那么该如何实现呢? 如果使用过vue-router,那么你会发现,vue-router在使用的时候其实就相当于一个tab选项卡,在点击之后,被点击的router-link元素会默认被添加上一个router-link-active的类,我们只需要设置这个类的样式即可.(当然,router-link-acti
原生js实现选项卡功能

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原生js选项卡写法</title> <style> #div1 div{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;} .active{background: red;} &
js实现简单的选项卡效果

效果如下: 代码如下: <!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=&q
JS实现的tab切换选项卡效果示例

本文实例讲述了JS实现的tab切换选项卡效果.分享给大家供大家参考,具体如下: <script type="text/javascript"> /* tab切换选项卡js效果 writed by *** 2010.08.13 1.currentid:string 当前被激活菜单的id; 2.otherids:Array() 其它未被激活的id; 3.tabclasses:Array() tab被激活时的样式类+tab未被激活时的样式类,存储两个值即可 */ function

js-tab选项卡

相关推荐

随机推荐