js如何实现选项卡？效果代码示例

阅读量： 17 发布日期： 2022-11-03 08:41:07

对于前端开发者来说，js选项卡应该是家常便饭了。它不仅仅是前端开发的一个工具，同样也是用户体验的关键组成部分。

1、基本原理

js如何实现选项卡？效果代码示例

基本原理如下图所示：基本原理是将需要显示的内容放入相应的标签中，然后通过设置不同的类名来设置不同的样式。当某个标签被点击时，切换类名，从而达到显示隐藏的目的。

2、实现代码

实现代码的部分包括以下内容：首先我们要在js中定义两个变量，一个是存储当前所在div的ID，另一个是存储你想要移动的div的ID。然后我们就可以用getElementById()方法来获取这两个div。接着我们通过style来改变div的display属性，将当前div显示出来，将想要移动的div隐藏起来。最后我们通过setTimeout()方法来间隔一段时间，一直重复这个过程，就可以实现滚动了。

3、效果图片

代码如下：

<!DOCTYPE html>

<head>

<title>jquery选项卡</title>

#div1 div{width: 200px;height: 200px;border: 1px red solid;display: none;}

.active{background:#999;}

</style>

window.onload=function(){

var oDiv=document.getElementById('div1');

var aInput=document.getElementsByTagName('input');

var aCon=oDiv.getElementsByTagName('div');

for (var i = 0; i < aInput.length; i++) {

aInput[i].index=i;

aInput[i].onclick=function(){

for (var i = 0; i < aInput.length; i++) {

aInput[i].className='';

aCon[i].style.display='';

}

this.className='active';

aCon[this.index].style.display='block';

}

</script>

$(function(){

$('#div1').find('input').click(function(){

$('#div1').find('input').attr('class','');

$('#div1').find('div').css('display','none');

$(this).attr('class','active');

$('#div1').find('div').eq($(this).index()).css('display','block');

})

</script>

</head>

<body>

</div>

</body>

总之，js选项卡是前端开发者和用户体验的关键组成部分。它不仅仅是前端开发的一个工具，同样也能提高用户的体验。

作者: bosscms，转载时必须经得同意并以链接形式注明作者和原始出处及本声明。

上一篇：: http://是什么意思，http与https之间的区别

下一篇：: 未结束的字符串常量是什么意思，错误解决方法

js如何实现选项卡？效果代码示例

热点推荐

相关模板推荐

无人机充电桩IT科技网站模板

HY011免费模板

HY010免费模板(带商城功能)

HY009免费模板

HY008免费模板

HY007免费模板

联系方式