`

纯javascript tab切换

阅读更多
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单</title>
<style type="text/css">
    *{
     margin:0;
     padding:0;
     list-style:none;
     font-size:12px;
    }
    .tab{
  width:298px;
  height:98px;
  margin:10px;
  border:1px solid #eee;
  overflow:hidden;
 }
 .tab_title{
  height:27px;
  position:relative;
  background:#f7f7f7;
 }
 .tab_title ul{
  position:absolute;
  width:301px;
  left:-1;
 }
 .tab_title li{
  float:left;
  width:58px;
  height:26px;
  line-height:26px;
  text-align:center;
  padding:0 1px;
  border-bottom:1px solid #eee;
  overflow:hidden;
 }
 .tab li a:link,.tab li a:visited{
  text-decoration:none;
  color:#000;
 }
 .tab li a:hover{
  color:#f90;
  font-weight:700;
 }
 .tab_title li.select{
  background:#fff;
  border-botton-color:#fff;
  border-left:1px solid #eee;
  border-right:1px solid #eee;
  padding:0;
 }
 .tab .tab_content .tabct{
  margin:10px 10px 10px 19px;
 }
 .tab .tab_content .tabct ul li{
  float:left;
  width:134px;
  height:25px;
  overflow:hidden;
 }
</style>
<script type="text/javascript">
 function $(id){
  return typeof id=="string"?document.getElementById(id):id;
 }
 window.onload = function(){
  var titleName = $("tab_title").getElementsByTagName("li");
  var tabContent = $("tab_content").getElementsByTagName("div");
  if(titleName.length != tabContent.length){
   return;
  }
  for(var i=0;i<titleName.length;i++){
   titleName[i].id = i;
   titleName[i].onmouseover = function(){
    for(var j = 0;j<titleName.length;j++){
     titleName[j].className="";
     tabContent[j].style.display="none";
    }
    this.className = "select";
    tabContent[this.id].style.display="block";
   }
  }
 }
</script>
</head>
<body>
<div class="tab" id="tab">
 <div class="tab_title"  id="tab_title">
  <ul>
   <li class="select">
       <a href="">公告</a>
   </li>
   <li>
       <a href="">规则</a>
   </li>
   <li>
       <a href="">论坛</a>
   </li>
   <li>
       <a href="">安全</a>
   </li>
   <li>
       <a href="">工艺</a>
   </li>
  </ul>
 </div>
 <div class="tab_content" id="tab_content">
  <div class="tabct" style="display:block">
   <ul>
    <li>
     <a href="" >马云台大激励青年创业0</a>
    </li>
    <li>
     <a href="">阿里给每个县长配智库</a>
    </li>
    <li>
     <a href="">2014电商品牌口碑报告</a>
    </li>
    <li>
     <a href="">三八节阿里系福利驾到</a>
    </li>
   </ul>
  </div>
  <div class="tabct" style="display:none">
   <ul>
    <li>
     <a href="">马云台大激励青年创业1</a>
    </li>
    <li>
     <a href="">阿里给每个县长配智库</a>
    </li>
    <li>
     <a href="">2014电商品牌口碑报告</a>
    </li>
    <li>
     <a href="">三八节阿里系福利驾到</a>
    </li>
   </ul>
  </div>
  <div class="tabct" style="display:none">
   <ul>
    <li>
     <a href="">马云台大激励青年创业2</a>
    </li>
    <li>
     <a href="">阿里给每个县长配智库</a>
    </li>
    <li>
     <a href="">2014电商品牌口碑报告</a>
    </li>
    <li>
     <a href="">三八节阿里系福利驾到</a>
    </li>
   </ul>
  </div>
  <div class="tabct" style="display:none">
   <ul>
    <li>
     <a href="">马云台大激励青年创业3</a>
    </li>
    <li>
     <a href="">阿里给每个县长配智库</a>
    </li>
    <li>
     <a href="">2014电商品牌口碑报告</a>
    </li>
    <li>
     <a href="">三八节阿里系福利驾到</a>
    </li>
   </ul>
  </div>
  <div class="tabct" style="display:none">
   <ul>
    <li>
     <a href="">马云台大激励青年创业4</a>
    </li>
    <li>
     <a href="">阿里给每个县长配智库</a>
    </li>
    <li>
     <a href="">2014电商品牌口碑报告</a>
    </li>
    <li>
     <a href="">三八节阿里系福利驾到</a>
    </li>
   </ul>
  </div>
 </div>
</div>
</body>
</html>

 

 

  • 大小: 3 KB
分享到:
评论

相关推荐

    Javascript—Tab切换

    Javascript—Tab切换

    纯CSS写的TAB切换

    纯CSS实现的TAB切换是一种常见的网页交互设计,它允许用户在不同的内容区域之间进行无JavaScript的导航。在本文中,我们将深入探讨纯CSS TAB切换的工作原理、关键样式以及如何实现这样的功能。 首先,理解TAB切换的...

    纯css tab切换效果(改进版)

    纯CSS实现的Tab切换效果尤其受到欢迎,因为它无需JavaScript,减少了代码依赖,提高了页面性能。在这个“纯css tab切换效果(改进版)”中,我们将探讨如何使用CSS来创建一个功能完善且视觉吸引人的Tab切换组件。 ...

    JavaScript实现tab栏切换效果

    JavaScript 实现的 Tab 切换效果是一种常见的网页交互设计,用于在不同的内容区域之间进行切换,通常用在页面顶部或侧边的导航菜单。在这个例子中,我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先...

    javascript tab切换,简单、易用

    JavaScript Tab切换是一种常见的网页交互设计,它允许用户在多个内容区域之间轻松切换,而无需页面刷新。这种技术常用于展示产品特性、用户评论、服务介绍等。本文将深入讲解如何使用JavaScript实现简单、易用的Tab...

    纯css半圆角tab标签切换代码

    7. **响应式设计**:考虑到不同设备和屏幕尺寸,纯CSS Tab切换可能还包含媒体查询(`@media`),以便在移动设备上优化显示。 通过这个项目,开发者不仅可以学习到如何用纯CSS实现Tab标签切换,还能深入了解CSS的...

    纯HTML和CSS实现Tab切换效果

    在网页设计中,Tab切换效果是一种常见的交互设计模式,它允许用户通过点击不同的标签来切换显示不同的内容区域。...然而,对于更复杂的交互需求,你可能还需要学习如何结合JavaScript来增强Tab切换的功能性和用户体验。

    纯css3实现的tab标签切换效果

    在本文中,我们将深入探讨如何使用纯CSS3实现Tab标签切换效果。Tab切换是一种常见的用户界面设计...通过掌握这些技巧,开发者可以在不依赖JavaScript的情况下创建出响应式的Tab切换组件,提升网站或应用的用户体验。

    javascript设计的tab标签切换

    最后,为了实现Tab切换的动画效果,可以使用CSS过渡或者JavaScript的setTimeout函数,使内容的显示和隐藏更加平滑。 总结起来,使用JavaScript设计Tab标签切换涉及到以下几个关键点: 1. 获取Tab和内容元素。 2. ...

    纯js写的tab标签切换

    本示例是使用纯JavaScript实现的Tab切换功能,这在不依赖任何JavaScript库或框架如jQuery的情况下尤其有用。下面我们将深入探讨这个主题,讲解如何实现纯JavaScript的Tab切换效果。 首先,我们需要理解HTML结构。一...

    DIV+CSS+JavaScript实现tab切换的选项卡

    本教程将重点讲解如何利用这三种技术实现tab切换的选项卡功能。 1. **HTML 结构**: 首先,我们需要创建一个包含多个`div`的结构,每个`div`代表一个选项卡的内容。通常,我们会有一个父级`div`作为容器,每个选项...

    uniapp 顶部tab切换菜单

    【uniapp 顶部tab切换菜单】是基于uniAPP框架实现的一种常见的用户界面元素,它用于在多个视图间进行切换,常应用于移动应用或Web应用的顶部导航。uniAPP是一个多端开发框架,允许开发者使用Vue.js语法编写一次代码...

    HTML实现的Tab切换效果,点击滑动和触控滑动(SlideTouch插件)

    在实现Tab切换时,通常会用到HTML、CSS和JavaScript。HTML用于构建基础结构,定义各个Tab和内容区域;CSS用于样式设置,使Tab和内容区域美观且布局合理;JavaScript则负责交互逻辑,监听用户的点击或滑动事件,并...

    tab切换纯js,select,radio,切换

    本文将详细讲解如何使用纯JavaScript实现Tab切换,以及与之相关的`select`选择器和`radio`单选按钮的切换。 首先,我们来理解Tab切换的基本概念。在HTML结构中,通常会有几个包含不同内容的`div`元素,它们被隐藏或...

    js tab切换源码下载

    简单JavaScript Tab切换源码下载。兼容IE8以及各种主流浏览器

    仿天猫tab切换标签

    Tab切换的基本原理是利用JavaScript或者CSS(例如CSS3的`:target`伪类)来控制不同内容块的显示与隐藏。通常,每个标签对应一个内容区,点击标签时,改变内容区的显示状态,达到切换效果。在HTML结构中,每个标签和...

    javascript tab标签 韩国购物网Flash标签切换效

    在tab切换效果中,需要通过DOM操作来隐藏或显示相应的内容区域,如切换不同的div块。 2. 事件处理:JavaScript通过事件监听来响应用户的交互行为,例如点击按钮或链接。在tab切换效果中,通常会为每个tab按钮添加...

    tab切换4个不同页面

    "Tab切换4个不同页面"的实现通常涉及到前端开发,尤其是HTML、CSS和JavaScript的运用。在这个场景中,我们有三个关键文件:`index.css`、`index.jsp`和`pages`目录。 1. **index.css**:这是一个CSS(层叠样式表)...

    tab切换h5动画效果源码

    在本项目中,"tab切换h5动画效果源码"是一个使用HTML5、CSS3和JavaScript实现的交互式用户界面组件。这个组件的核心功能是通过点击不同的tab标签,实现内容区域的平滑横向切换,同时伴有选中框的动态移动效果,给人...

    JS实现Tab内容切换,页面不刷新,内容切换,网址变化

    jQuery简化了DOM操作和事件处理,使得Tab切换的实现更加简洁。如果你使用jQuery,可以利用`.on()`方法绑定事件,`.removeClass()`和`.addClass()`切换样式,以及`.show()`和`.hide()`控制内容的可见性。 总的来说,...

Global site tag (gtag.js) - Google Analytics