用JS编写选项卡效果
本文实例为大家分享了JS编写选项卡效果的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
.selectka {
width:500px;
height:400px;
margin:auto;
border:1px solid #09e1ff;
}
.left,.right{
float:left;
height:400px;
}
#menu{
text-align: center;
line-height: 80px;
font-size: 20px;
color:purple;
}
li{
list-style: none;
}
#menu>li{
width:100px;
height:80px;
border:1px dashed blueviolet;
box-sizing: border-box;
}
.right{
position: relative;
width:399px;
background: pink;
margin-left:1px;
text-align: center;
font-size: 100px;
line-height: 400px;
}
.right li{
position: absolute;
width:399px;
height:400px;
display: none;
}
</style>
</head>
<body>
<div class="selectka">
<div class="left">
<ul id="menu">
<li class="menulist">衣服</li>
<li class="menulist">美妆</li>
<li class="menulist">包包</li>
<li class="menulist">美食</li>
<li class="menulist">首饰</li>
</ul>
</div>
<div class="right">
<ul>
<li class="numlist">衣服</li>
<li class="numlist">美妆</li>
<li class="numlist">包包</li>
<li class="numlist">美食</li>
<li class="numlist">首饰</li>
</ul>
</div>
</div>
<script>
var menu_list=document.getElementsByClassName("menulist");
var num_list=document.getElementsByClassName("numlist");
var moo=null;
var yuu=null;
for(var i=0;i<menu_list.length;i++) {
menu_list[i].index = i;
menu_list[i].onmouseenter = function () {
/* console.log(this.index);*/ //this.index 为当前目标的索引值
/* for(var k=0;k<num_list.length;k++){
num_list[k].style.display ="none";
}
num_list[this.index].style.display ="block";
}*/
if(yuu)yuu.style.background ="none";
this.style.background ="yellow";
yuu=this;
if(moo)moo.style.display="none";
num_list[this.index].style.display = "block";
moo = num_list[this.index];
}
}
</script>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript实现tabs选项卡切换效果(自写原生js)
现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下: html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</
-
用js实现简单的tab选项卡
tab选卡 现实网页的使用频率极高,基本上每个网页都需要使用一个或多个tab选卡 我们可以用js实现简单的tab选卡效果 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
-
JS实现选项卡插件的两种写法（jQuery和class）
本文实例为大家分享了JS实现选项卡插件的2种写法,供大家参考,具体内容如下 实现插件的几个注意点: (1)定义一个固定的html结构,比如选项卡的标题的标签为为li,每个选项卡的内容的标签为div等等: (2)选中时的样式提前确定: (3)最好先用简单的JS实现选项卡的功能,再改为插件的模式. html结构如下: <style> * { margin: 0; padding: 0; } ul { list-style: none; } #tabBox { box-sizing: border-
-
js实现Tab选项卡切换效果
本文实例为大家分享了js实现Tab选项卡切换效果展示的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="tab.css"> <script src="tab.js&quo
-
js选项卡的实现方法
本文实例讲述了js选项卡的实现方法.分享给大家供大家参考.具体分析如下: 一.思路 1. 获取元素: 2. for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件: 3. 点击当前按钮时会以高亮状态显示,通过for循环历遍把所有的按钮样式设置为空在把所有div的display设置为none. 4. 点击当前按钮添加样式,把当前div显示出来,display设置为block. 二.html代码: <div id="div1"> <inpu
-
js实现简单的可切换选项卡效果
本文实例讲述了js实现简单的可切换选项卡效果的方法.分享给大家供大家参考.具体如下: 如图,最简单的纯粹的选项卡 第一步,当然是先写html代码和css样式 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>无标题文档</title> <style> body,ul,li{margin:0; padding:0; font:12
-
js实现简单选项卡功能
本文为大家分享了js实现简单选项卡功能的具体代码,供大家参考,具体内容如下 首先我们来写HTML代码,构建出整体结构 代码如下: <!--导航栏部分HTML代码--> <nav id="nav"> <ul> <li class="act">选卡1</li> <li>选卡2</li> <li>选卡3</li> <li>选卡4</li> &
-
JS实现选项卡实例详解
本文实例讲述了JS实现选项卡的方法.分享给大家供大家参考,具体如下: 思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的. 1.首先获取元素. 2.for循环历遍按钮元素添加onclick 或者 onmousemove事件. 3.因为点击当前按钮时会以高亮状态显示,所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none. 4.把当前按钮添加样式,把当前DIV显示出来,display设置为bl
-
js实现简单选项卡制作
本文实例为大家分享了js实现简单选项卡制作代码,供大家参考,具体内容如下 实现功能 通过点击按钮查看相应的介绍: 按钮相应的变色: 内容相应的切换: html 文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid
-
js利用iframe实现选项卡效果
本文实例为大家分享了js利用iframe实现选项卡的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .header{ width: 400px; height: 40px; border:solid 1px red; } .header a{ width: 1