Tab选项卡切换效果_技术笔记

慕容9290173 2022-03-18

宽度计算技巧0318

0赞 · 0采集
慕容9290173 2022-03-18

这个坑记住0318

0赞 · 0采集
小紫英 2020-12-27

window.onload=function(){
// 将所有点击的标题和要显示隐藏的列表取出来
var menu=document.getElementById('menu');
var allTits=menu.getElementsByTagName("p");
var allCons=menu.getElementsByTagName('ul');
// 遍历所有要点击的标题且给它们添加索引及绑定事件
// 获取点击的标题上的索引属性，根据该索引找到对应的列表
// 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来
for(var i=0;i<allTits.length;i++){
allTits[i].id=i;
allTits[i].onclick=function(){
for(var j=0;j<allCons.length;j++){
allCons[j].style.display='none';
}
if(allCons[this.id].style.display=='none'){
allCons[this.id].style.display='block';
}else{
allCons[this.id].style.display='none';
}
}
}
}

0赞 · 0采集
手可摘星_陈 2020-11-16

css样式计算部分没有理解

0赞 · 0采集
VictoryLang 2020-07-06

延迟选项卡的核心思路是：
        选项卡重置操作和选中操作放入定时器内
没看视频自己做时：
        选项卡重置操作放在定时器外
        选中操作放入定时器内
这样造成鼠标放上去后，选项卡空白等待（block）的情况发生。
重点：重置与事件同时进行。

0赞 · 0采集
qq_兂吢_0 2020-01-09

console.log(); console.debug(); console.info(); console.error(); console.warn();
（1）除了console.log() 其他都会显示行号
（2）除了console.log()和console.debug()其他都会有图标区别
console.assert()
用于判断一个表达式是否是真，如果为错误的话，会输出错误提示
console.clear()
用于清除控制台信息，其实跟点”清除“按钮一样的
console.dir()
用于表格化显示一个对象
console.dirxml()
在控制台中显示XML数，例如console.dirxml(document.body)会在控制台显示body的DOM文档树
console.trace()
显示JavaScript执行的堆栈信息
console.group()、console.groupCollapsed()、console.group()
对输出到控制台的信息进行分组
console.time()、console.timeEnd()
一般用于计算某段JavaScript执行的时间
console.profile()、console.profileEnd()
用于查看一段JavaScript代码的性能分析
console.profile()、console.profileEnd()
用于查看一段JavaScript代码的性能分析
console.count()
输出console.count()所在语句执行的次数，例如你要看一个循环是否执行了你预想的次数，可以在循环中放入一个console.count("mycount")；这样，循环执行完成后，控制台就会显示出循环执行的次数
console.exception()
显示程序中出现错误的堆栈和相关错误信息
console.table()
将数据用表格的形式显示出来，比如数组，对象之类的

0赞 · 0采集
S扶摇S 2019-09-05

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;
padding:0;
list-style:none;}
.wrap{height:170px;
width:490px;
margin:60px auto;
overflow: hidden;
position: relative;
margin:100px auto;}
.wrap ul{position:absolute;}
.wrap ul li{height:170px;}
.wrap ol{position:absolute;
right:5px;
bottom:10px;}
.wrap ol li{height:20px; width: 20px;
background:#ccc;
border:solid 1px #666;
margin-left:5px;
color:#000;
float:left;
line-height:center;
text-align:center;
cursor:pointer;}
.wrap ol .on{background:#E97305;
color:#fff;}

</style>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById('wrap'),
pic=document.getElementById('pic'),
list=document.getElementById('list').getElementsByTagName('li'),
index=0,
timer=null;
var lis = pic.getElementsByTagName('li');
// 定义并调用自动播放函数
timer = setInterval(autoPlay,2000);

function autoPlay(){
index++;
if(index>=list.length){
index = 0;
}
changeOption(index);
}
// 定义图片切换函数
function changeOption(curIndex){
for(var j=0;j<list.length;j++){
list[j].className = '';
lis[j].style.display = 'none';
}

//高亮显示当前页签
list[curIndex].className = 'on';
lis[curIndex].style.display = 'block';
//解决bug
index = curIndex;
}
// 鼠标划过整个容器时停止自动播放
wrap.onmouseover = function(){
clearInterval(timer);
}
// 鼠标离开整个容器时继续播放至下一张
wrap.onmouseout = function(){
timer = setInterval(autoPlay,2000);
}
// 遍历所有数字导航实现划过切换至对应的图片
for(var i=0;i<list.length;i++){
list[i].id = i;
list[i].onmouseover = function(){
changeOption(this.id);
}
}
}

</script>
</head>
<body>
<div class="wrap" id='wrap'>
<ul id="pic">
<li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>

0赞 · 0采集
S扶摇S 2019-09-03

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var send=document.getElementById('send'),
times=60,
timer=null;

send.onclick=function(){
// 计时开始
if(timer){
clearInterval(timer);
timer=null;
}

timer=setInterval(sendon,1000);
}
function sendon(){
if(times<=0){
clearInterval(timer);
times=60;
send.value="发送验证码";
send.disabled=false;
}
else{
times--;
send.value=times+"秒后重试";
send.disabled=true;
}


}
}
</script>
</head>
<body>
<input type="button" id="send" value="发送验证码">
</body>
</html>

0赞 · 0采集
S扶摇S 2019-09-03

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;
padding:0;
font-size:13px;
list-style:none;}

.menu{width:210px;
margin:50px auto;
border:1px solid #ccc;}

.menu p{height:25px;
line-height:25px;
font-weight:bold;
background:#eee;
border-bottom:1px solid #ccc;
cursor:pointer;
padding-left:5px;}

.menu div ul{display:none;}

.menu li{height:24px;
line-height:24px;
padding-left:5px;}
</style>
<script type="text/javascript">
function $(id){

return typeof id==="string"?document.getElementById(id):id;

}
window.onload=function(){

// 将所有点击的标题和要显示隐藏的列表取出来
var titles=$('menu').getElementsByTagName('p');
var conts=$('menu').getElementsByTagName('ul');

// 遍历所有要点击的标题且给它们添加索引及绑定事件

for(var i=0;i<titles.length;i++){
titles[i].id=i;
titles[i].onclick = function () {
for(var j=0;j<titles.length;j++) {

conts[j].style.display='none'

}

conts[this.id].style.display='block'
}

}

// 获取点击的标题上的索引属性，根据该索引找到对应的列表

// 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来

}
</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p>Web前端</p>
<ul style="display:block">
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p>后台脚本</p>
<ul>
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p>前端框架</p>
<ul>
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
</body>
</html>

0赞 · 0采集
打算卖卷饼的程序员 2019-07-02

<script type="text/javascript">
window.onload=function(){
var send=document.getElementById('send'),
times=60,
timer=null;
send.onclick=function(){
// 计时开始
timer = setInterval(yzm,1000)
function yzm(){
times--;
send.value = times + "秒后重试";
if (times<=0) {
send.value = "发送验证码"
times = 60 ;
clearInterval(timer);
}
}
}
}
</script>

0赞 · 0采集
打算卖卷饼的程序员 2019-07-02

<script type="text/javascript">
// 封装id函数
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
}
window.onload = function() {

// 将所有点击的标题和要显示隐藏的列表取出来
var tits = $('menu').getElementsByTagName('p');
var bys = $('menu').getElementsByTagName('ul')

if (tits.length!=bys.length)
return;
// 遍历所有要点击的标题且给它们添加索引及绑定事件
for (var i = 0; i < tits.length; i++) {
tits[i].id=i;
tits[i].onmouseover=function(){
for (var j = 0; j < tits.length; j++) {
bys[j].style.display='none';
}
bys[this.id].style.display="block";
}
}

}
</script>

1赞 · 0采集
zjs979575 2019-03-27

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;
padding:0;
list-style:none;}
.wrap{height:170px;
width:490px;
margin:60px auto;
overflow: hidden;
position: relative;
margin:100px auto;}
.wrap ul{position:absolute;}
.wrap ul li{height:170px;}
.wrap ol{position:absolute;
right:5px;
bottom:10px;}
.wrap ol li{height:20px; width: 20px;
background:#ccc;
border:solid 1px #666;
margin-left:5px;
color:#000;
float:left;
line-height:center;
text-align:center;
cursor:pointer;}
.wrap ol .on{background:#E97305;
color:#fff;}

</style>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById('wrap');
pic=document.getElementById('pic').getElementsByTagName("li");
list=document.getElementById('list').getElementsByTagName('li');
index=0;
timer=null;

for(var i=0;i<list.length;i++) {
list[i].index=i;
list[i].onmouseover=function() {
clearInterval(timer);
change(this.index);
index=this.index;
}
}
wrap.onmouseleave=function() { //用onmouseout的话鼠标离开序号时就开始切换图片了
if(timer) {
clearInterval(timer);
timer=null;
}
timer=setInterval(Autoplay,2000);
}
if(timer) {
clearInterval(timer);
timer=null;
}
timer=setInterval(Autoplay,2000);
// 定义并调用自动播放函数

function Autoplay() {
index++;
if(index>=list.length) {
index=0;
}
change(index);
}
function change(curIndex) {
for(var j=0;j<list.length;j++) {
list[j].className="";
pic[j].style.display="none";
/*pic=document.getElementById('pic');
pic.childNodes[j].style.display="none";
这样为什么不行?
*/
}
list[curIndex].className="on";
pic[curIndex].style.display="block";
}
// 定义图片切换函数


// 鼠标划过整个容器时停止自动播放

// 鼠标离开整个容器时继续播放至下一张

// 遍历所有数字导航实现划过切换至对应的图片
}

</script>
</head>
<body>
<div class="wrap" id='wrap'>
<ul id="pic">
<li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>

0赞 · 0采集
zjs979575 2019-03-27

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var send=document.getElementById('send'),
times=5,
timer=null;
send.onclick=function(){
// 计时开始
send.disabled=true;
send.value=times+"秒后重试";
timer=setInterval(change,1000);
}
function change() {
times=times-1;
if(times==0){
send.value="发送验证码";
clearInterval(timer);
times=10;
send.disabled=false;
}
else{
send.value=times+"秒后重试";
}
}
}
</script>
</head>
<body>
<input type="button" id="send" value="发送验证码">
</body>
</html>

0赞 · 0采集
iFlowers 2019-03-27

将id的获取封装成一个方法。

截图
0赞 · 0采集
xyc9514736xyc 2019-03-09

function $(id){
return typeof id === 'string'?document.getElementById(id):id;
}
//给id单独封装一个函数，如果id为字符串的话，返回getElementById(id)否则返回id本身
//A=(B)?C:D上面是一般的形式，代表的含义是判断B是否为真。若为真，返回A=C;反之，A=D；问号冒号语句一般是if语句的简洁写法

window.onload=function(){
var title = document.getElementById('menu').getElementsByTagName('p');
var list = document.getElementById('menu').getElementsByTagName('ul');
// 将所有点击的标题和要显示隐藏的列表取出来

if(title.length != list.length){
return;
}
for(var i=0;i<title.length;i++){
title[i].id = i;
title[i].onclick = function(){
for(var j=0; j<title.length; j++){
list[j].style.display = "none";
}
this.style.display = 'block';
list[this.id].style.display = 'block';
}
}
// 遍历所有要点击的标题且给它们添加索引及绑定事件

// 获取点击的标题上的索引属性，根据该索引找到对应的列表

// 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来
}

0赞 · 0采集
牧小土 2019-02-22

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;
padding:0;
font-size:13px;
list-style:none;

}

.menu{width:210px;
margin:50px auto;
border:1px solid #ccc;}

.menu p{height:25px;
line-height:25px;
font-weight:bold;
background:#eee;
border-bottom:1px solid #ccc;
cursor:pointer;
padding-left:5px;}

.menu div ul{display:none;}

.menu li{height:24px;
line-height:24px;
padding-left:5px;}
</style>
<script type="text/javascript">
function $(id){

return typeof id==="string"?document.getElementById(id):id;

}
window.onload=function(){

// 将所有点击的标题和要显示隐藏的列表取出来
var titles=$('menu').getElementsByTagName('p');
var lists=$('menu').getElementsByTagName('ul');

// 遍历所有要点击的标题且给它们添加索引及绑定事件
for(var i=0;i<titles.length;i++) {
titles[i].id=i;
titles[i].onclick=function() {
for(var j=0;j<titles.length;j++) {
lists[j].style.display='none'
}
lists[this.id].style.display='block'
}
}

// 获取点击的标题上的索引属性，根据该索引找到对应的列表

// 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来

}
</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p>Web前端</p>
<ul style="display:block">
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p>后台脚本</p>
<ul>
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p>前端框架</p>
<ul>
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
</body>
</html>

0赞 · 0采集
weibo_木夕木夕MEI_0 2018-10-11

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;
padding:0;
font-size:13px;
list-style:none;}

.menu{width:210px;
margin:50px auto;
border:1px solid #ccc;}

.menu p{height:25px;
line-height:25px;
font-weight:bold;
background:#eee;
border-bottom:1px solid #ccc;
cursor:pointer;
padding-left:5px;}

.menu div ul{display:none;}
/*.menu .active{
display: block;*/
}
.menu li{height:24px;
line-height:24px;
padding-left:5px;}
</style>
// <script src="../resources/js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

function $(id){
return typeof id==="string"?document.getElementById(id):id;
}
window.onload=function(){
// 将所有点击的标题和要显示隐藏的列表取出来
var titles=$('menu').getElementsByTagName('p');
var lists=$('menu').getElementsByTagName('ul');
// 遍历所有要点击的标题且给它们添加索引及绑定事件
for (var i=0;i<titles.length;i++) {
titles[i].id=i;
// 获取点击的标题上的索引属性，根据该索引找到对应的列表
titles[i].onclick=function(){
//console.log(this.id);
for (var j=0;j<titles.length;j++) {
//关闭
if(this.id!=j){
lists[j].style.display='none';
}else{
// 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来
lists[this.id].style.display=lists[this.id].style.display=='block'?"none":"block";
}
}

}

}
}
/* $(function(){
$("p").click(function(){
$(this).siblings().toggleClass("active").parent().siblings().find("ul").removeClass("active");
});
})*/

</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p class="menu-tit" id="menu-tit">Web前端</p>

<ul style="display:block">
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p>后台脚本</p>
<ul>
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p>前端框架</p>
<ul>
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
</body>
</html>

0赞 · 0采集
qq_慢才后生_ehCEY4 2018-08-20

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.hidden {
display: none;
}
.show {
display: inline-block;
}
</style>
<script type="text/javascript">
window.onload=function(){
var send=document.getElementById('send');
var inside = document.getElementById('inside');
times=60,
timer=null;
send.onclick=function () {
//计时开始即禁用send
send.setAttribute("disabled",true);
function www(){
// 显示inside
inside.className = "show";
times--;
if(times<0) {
clearInterval(i);

//计时结束即重置启用send，并隐藏inside
send.disabled=false;
times = 60;
inside.className="hidden";
}
inside.value = times + "秒后重试";
}
var i = setInterval(www,1000); }
}
</script>
</head>
<body>
<input type="button" id="send" value="发送验证码">
<input type="button" id="inside" class= "hidden" disabled="disabled" value="计时">
</body>
</html>

0赞 · 0采集
qq_慢才后生_ehCEY4 2018-08-17

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;
padding:0;
font-size:13px;
list-style:none;}

.menu{width:210px;
margin:50px auto;
border:1px solid #ccc;}

.menu p{height:25px;
line-height:25px;
font-weight:bold;
background:#eee;
border-bottom:1px solid #ccc;
cursor:pointer;
padding-left:5px;}

/*
.menu div ul{display:none;}
*/

.menu li{height:24px;
line-height:24px;
padding-left:5px;}
.active {
display: block;
}
.hidden {
display: none;
}
</style>
<script type="text/javascript">

//window.onload=function(){

// 将所有点击的标题和要显示隐藏的列表取出来

// 遍历所有要点击的标题且给它们添加索引及绑定事件

// 获取点击的标题上的索引属性，根据该索引找到对应的列表

// 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来

//}

</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p id ="p0">Web前端</p>
<ul id= "ul0" class="active">
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p id ="p1">后台脚本</p>
<ul id= "ul1" class="hidden">
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p id ="p2">前端框架</p>
<ul id= "ul2" class="hidden">
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
<script>
/*
String.prototype.myReplace=function(f,e){//吧f替换成e
var reg=new RegExp(f,"g"); //创建正则RegExp对象
return this.replace(reg,e);
}
var tit = document.getElementById("menu").childNodes[1].childNodes[3];
var uls = document.getElementsByTagName("ul");
var sp = tit.innerHTML.split('<li>').toString().split('</li>');
//document.write(tit.length);
for(var i=0;i<tit.length;i++){

document.write(tit[i]+"<br>");}
document.write(sp.toString().myReplace(',',''));

*/

var menu = document.getElementById("menu");
for(var i=0;i<menu.getElementsByTagName("p").length;i++)
!(window.onload = function(i) {
document.getElementById("p"+i).onclick = function() {
if(document.getElementById("ul"+ i).className === "hidden"){
for(var j=0;j<menu.getElementsByTagName("ul").length;j++)
document.getElementById("ul"+ j).className = "hidden";

document.getElementById("ul"+ i).className = "active";
alert("1");
}
else if(document.getElementById("ul"+ i).className === "active"){
document.getElementById("ul"+ i).className = "hidden";
alert("2");
}
else alert("出现错误！");
}
}(i));

/* var i=0;
document.write(document.getElementById("ul"+ i).className);*/
</script>
</body>
</html>

0赞 · 0采集

没毛病惨就完事了 2018-07-25

自己根据1-4AMY老师的代码例案。
第一次接触js自己写的。如法炮制：

<script type="text/javascript">
    function $(id){
        return typeof id=='string'?document.getElementById(id):id;
    }
    window.onload=function() {
        var ps = $('menu').getElementsByTagName('p');
        var uls = $('menu').getElementsByTagName('ul');
        for (var i = 0; i < uls.length; i++) {
            ps[i].id = i;
            ps[i].onclick = function () {
                if(uls[this.id].style.display == 'block')
                return uls[this.id].style.display = 'none';
                else
                return uls[this.id].style.display = 'block';
            }
        }
    }

</script>

0赞 · 0采集

Sandaydi 2018-07-21

Tab切换类型

截图
0赞 · 0采集
慕粉1901535335 2018-06-20

{
    //方法一。代码最简洁。JQuery方式。记得head里加上jquery引用哦。
   /*-----
    $("p").on("click",function(){
         $(this).next().slideToggle(500);
  })
}
-----*/
//方法二。效果：同方法一，点击后之前展开的p不折叠。
    /*---
    var ps=document.getElementsByTagName("p");
      var uls=document.getElementsByTagName("ul");
if(ps.length=uls.length){
     for(i=0;i<ps.length;i++){
        ps[i].id=i;
        ps[i].onclick=function(){
            if(uls[this.id].style.display=="block"){
            uls[this.id].style.display="none";
            }
            else{
            uls[this.id].style.display="block";
            }
        }
     }
   }
}
----*/
//方法三。效果：折叠。
    var p=document.getElementById("menu").getElementsByTagName("p");
var ul=document.getElementById("menu").getElementsByTagName("ul");
for(i=0;i<p.length;i++)
    {
  p[i].aa=i;
  p[i].onclick=function()
        {
   for(j=0;j<ul.length;j++)
            {
    ul[j].style.display="none";
     }
          ul[this.aa].style.display="block";
  }
}
}

1赞 · 1采集

辰慕 2018-05-24

tab切换分为四类：划过切换；点击切换；延迟切换；自动切换；

截图

0赞 · 0采集

孔天逸 2018-05-19

tab选项卡的学习在js中还有遮罩层

截图
0赞 · 0采集
qq_NightWalker_1 2018-04-04

网页特效

截图
0赞 · 0采集
你追过的女孩 2018-01-20

Ok

0赞 · 0采集
慕粉3601161 2017-12-09

选项卡

截图
0赞 · 0采集
慕瓜5189485 2017-11-10

// 封装id函数 function $(id) { return typeof id === 'string' ? document.getElementById(id) : id; } //加载 window.onload = function() { var index = 0; var timer = null; var titles = $("notice-title").getElementsByTagName("li"); var divs = $("notice-content").getElementsByTagName("div"); if(titles.length != divs.length) return; for(var i = 0; i < titles.length; i++) { titles[i].id = i; titles[i].onmouseover = function() { // 如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行 if(timer){ clearTimeout(timer); timer=null; } timer = setTimeout(() => { for(var j = 0; j < titles.length; j++) { titles[j].className = ""; divs[j].style.display = "none"; } this.className = "select"; divs[this.id].style.display = "block"; }, 400) } } }

0赞 · 0采集
慕瓜5189485 2017-11-10

// 封装id函数 function $(id) { return typeof id === 'string' ? document.getElementById(id) : id; } //加载 window.onload = function() { var titles = $("notice-title").getElementsByTagName("li"); var divs = $("notice-content").getElementsByTagName("div"); if(titles.length != divs.length) return; var id = 0; for(var i = 0; i < titles.length; i++) { titles[i].id = i; titles[i].onmouseover = function() { for(var j = 0; j < titles.length; j++) { titles[j].className = ""; divs[j].style.display = "none"; } this.className = "select"; divs[this.id].style.display = "block"; } } }

0赞 · 2采集
慕瓜5189485 2017-11-10

1、最左和最右的标题项被选择时，边框和外边框靠近会使边框变为2倍宽度，通过将标题栏设置得比外div元素宽，绝对定位使标题栏left:-1px，令内边框和外边框重合，从而只显示1倍边框宽度。 2.、下边框处理：将下边框颜色设为白色即可。 3.、左右边框处理：在定义标题项宽度时通过padding留出左右边框的位置，在被选择时设置左右边框后清除掉padding即可，从而不会使文本内容发生变化。 .notice{ width: 298px; height: 98px; border: 1px solid #eee; margin: 10px; overflow: hidden; } .notice-title{ height: 27px; position: relative; background: #F7F7F7; } .notice-title ul{ position: absolute; width: 301px; left: -1px; } .notice-title li{ float: left; width: 58px; height: 26px; line-height: 26px; text-align: center; overflow: hidden; padding:0 1px; background: #fff; border-bottom: 1px; background: #F7F7F7; } .notice-title li.select{ padding: 0; background: #FFFFFF; border-bottom: #FFFFFF; border-left: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; }

0赞 · 1采集

数据加载中...