js练习----tab标签栏切换

                                                 

js效果为鼠标移到不同标签显示对应的div

**js思路:

 1.通过id或者getElementsByTagName或者其他方式找到各个标签,这里分别为 服装,家电,饮食,娱乐标签

     * 通过循环给每一个标签注册鼠标事件,并且给每一个标签设定一个属性,给出属性值,这是为了与下面的div相对应,在下面的div中通过获取设定的属性值就可以与相应表亲对应

     * 鼠标事件的内容:给每一个标签注册事件时,先使包括这个标签在内的各个标签背景为空,再给当前执行事件的标签一个不同的背景

2.通过id或者其他方式获标签下面的div(这个步骤在鼠标事件内进行)

      *    在上一步给执行事件的标签不同背景后,通过getAttribute获得之前设定的属性值

      *      再遍历每一个div,遍历时先让每一个div隐藏,再让下标玉获得的属性值相同的div显示

**完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style type="text/css">
*{
margin:auto auto;
}
.bd{
margin-top: 100px;
width:200px;
height:30px;
}
.bd span{
background: #eee;
margin-left: 1px;
display: block;
float:left;
font-size: 16px;
display: block;
padding:5px;
border-radius: 6px;
}
.bg{
background:#e87c3b;
}
.hd{
width:200px;
height:80px;
margin-top:10px;
position: relative;
}
.sjx{
width: 0px;
height: 0px;
border-top: 5px solid #fff;
border-right: 5px solid #fff;
border-left:5px solid #fff;
border-bottom: 10px solid #e87c3b;
position: absolute;
top:-100%;

}
.hd div{
width:200px;
height:auto;
background: #e87c3b;
padding-bottom: 20px;
}
.show{
display: block;
}
.hidden{
display: none;
}
ul,li{
list-style: none;
}
ul{
margin:0;
padding:10px;
}
</style>
</head>
<body>
<div class="bd" id="d">
<span>服装</span>
<span>家电</span>
<span>饮食</span>
<span>娱乐</span>

</div>
<div class="hd" id="hd">

<div style="display: block;">
<ul>
<li>上衣</li>
<li>下装</li>
<li>裤装</li>
<li>连衣裙</li>
</ul>

</div>
<div style="display: none;padding-bottom: 20px;">
<ul>
<li>电视机</li>
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
<li>吸尘器</li>
</ul>
</div>
<div style="display: none;">
<ul>
<li>蔬菜</li>
<li>水果</li>

</ul>
</div>
<div style="display: none;">娱乐模块</div>

</div>
<div class="sjx"></div>
<script type="text/javascript">
var spans=document.getElementsByTagName("span");
var len=spans.length;

for(var i=0;i<len;i++){
var span=spans[i];
span.setAttribute(‘index‘,i);
span.onmouseover=function(){
for(var j=0;j<len;j++){
spans[j].style.background=‘‘;
}
this.style.background=‘ #e87c3b‘;
var index=parseInt(this.getAttribute(‘index‘));

var divs=document.querySelectorAll(‘#hd div‘);
var divlen=divs.length;
for(var x=0;x<divlen;x++){
divs[x].style.display="none";

}

divs[index].style.display=‘block‘;

};

}
</script>
</body>
</html>

      

  

原文地址:https://www.cnblogs.com/ayayi-666/p/9387496.html

时间: 2024-10-11 02:00:11

js练习----tab标签栏切换的相关文章

js实现tab页切换选项卡代码特效

原文:js实现tab页切换选项卡代码特效 源代码下载地址:http://www.zuidaima.com/share/1550463557864448.htm JS 写的tab切换效果

CSS+JS实现tab标签切换

实现tab标签切换比较简单,下面先看看我实现的效果: 我主要实现了: 1.tab之间的相互切换: 2.显示选中的tab 下面看看实现代码: css: html,body,div{ font-size: 12px; font-family:"Arial"; } .tab-ui{ width: 400px; height: 300px; position: relative; } .tab-title{ border-top-right-radius:8px; float: left; b

原生JS实现 ‘Tab栏切换’,‘手风琴’,‘轮播图’效果

1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib

Tab标签栏 切换 权威总结

angular的标签栏,有两种方法实现: 内容全部加载到页面中,再利用ng-show指令. 将每一块要加载的内容做成模板,利用ng-if指令加载. 详细例子如下: ng-show <script>var App = angular.module("App",[]); App.controller('DatailController',['$scope',function($scope){ $scope.detailDownTitle = { title :[ "选

JS案例--Tab栏切换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

标签页(tab)切换的原生js,jquery和bootstrap实现

概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(tab)切换的jquery实现 标签页(tab)切换的bootstrap实现 标签页(tab)切换的原生js实现 说明: 代码是我自己写的,与课程中的不一样. 主要利用display:none来把部分内容隐藏而显示其它内容. 遇到了事件的循环绑定,我是利用添加id使其成为钩子来解决的. 代码: <!DO

搞定tab标签切换效果

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>搞定tab标签切换效果</title><style>*{ margin:0; padding:0;list-style: none;}body {font:12px/1.5 Tahoma;}#big{border: 1px solid b

原生js实现tab选项卡里内嵌图片滚动特效代码

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>原生js实现tab选项卡里内嵌图片滚动特效代码</title><meta name="keywords" content="原生js实现tab选项卡里内嵌图片滚动特效代码" /><meta name=&

JavaScript之tab面板切换

自己写了一个tab选项卡的切换,感觉还不错,跟大家分享一下. 一.点击切换 页面效果: html页面: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>tab面板切换</title> <style> .content{width: 1000px;height: 500px;margin: 0 auto;border: 1px s