JS写选项卡，点击不同颜色选项卡，内容出现与之对应的颜色

大阳plus

已于 2023-12-06 14:08:54 修改

阅读量743

点赞数 5

分类专栏： JS 文章标签： javascript css html

于 2020-07-17 19:38:31 首次发布

本文链接：https://blog.csdn.net/weixin_43400431/article/details/107416092

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

写的比较粗糙
HTML：

<ul class="tabs">
			<li style="background: #7FFF00;">娱乐</li>
			<li style="background: #6495ED;">趣事</li>
			<li style="background: #BD4932;">综艺</li>
			<li style="background: #58B850;">影视</li>
			<li style="background: #FFA500;">动漫</li>
			<div class="clear"></div>
		</ul>
		<div class="content" style="display: block;">
			<p>555</p>
			<p>222</p>
		</div>
		<div class="content">
			<p>444</p>
			<p>2222</p>
		</div>
		<div class="content">
			<p>8888</p>
			<p>999</p>
		</div>
		<div class="content">
			<p>0000</p>
			<p>4444</p>
		</div>
		<div class="content">
			<p>5555</p>
			<p>7777</p>
		</div>

css:

*{margin: 0;padding: 0px;}
			li{list-style: none;float:left;}
			.tabs li{width: 120px;height: 50px;text-align: center;line-height: 50px;
			background-color: #7FFFD4;color: #A52A2A;margin-right: 2px;}
			.clear{clear: both;}
			.content{display: none;width: 608px;height: 300px;background: #AAAAAA;}

JavaScript：

var tabs=document.querySelectorAll(".tabs li");
			var content=document.getElementsByClassName("content");
			for(var i=0;i<tabs.length;i++){
				tabs[i].index=i;
				tabs[i].onclick=function(){
					for(var j=0;j<content.length;j++){
					content[j].style.display="none"
				    }
					content[this.index].style.display="block";
				}
			}
			for(var k=0; k<tabs.length;k++){
                content[k].style.background=tabs[k].style.background;
            }

效果图：

番外：滑块滚动

<!DOCTYPE html>
<html>
<head>
  <title>Tab Navigation</title>
  <style>
    .tab-container {
      position: relative;
      overflow-x: auto;
    }

    .tab {
      display: inline-block;
      padding: 10px 20px;
      background-color: #f2f2f2;
      cursor: pointer;
    }

    .tab.active {
      background-color: #ccc;
    }

    .slider {
      position: absolute;
      bottom: 0;
      height: 3px;
      background-color: #333;
      transition: left 0.3s ease;
    }

    .content {
      display: none;
      padding: 20px;
      background-color: #f2f2f2;
    }

    .content.active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="tab-container">
    <div class="tab" data-tab="tab1">Tab 1</div>
    <div class="tab" data-tab="tab2">Tab 2</div>
    <div class="tab" data-tab="tab3">Tab 3</div>
    <div class="slider"></div>
  </div>

  <div class="content-container">
    <div class="content" id="content">Content</div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // 初始选中第一个tab
      $('.tab').first().addClass('active');
      // 获取第一个tab的宽度
      var initialWidth = $('.tab').first().outerWidth();
      // 设置滑块的初始宽度
      $('.slider').css('width', initialWidth);
      // 点击tab切换内容区和滑块位置
      $('.tab').click(function() {
        var tabId = $(this).data('tab');
        $('.tab').removeClass('active');
        $(this).addClass('active');

        // 根据选中的tab传递不同参数显示内容
        var content = '';
        if (tabId === 'tab1') {
          content = 'Content for Tab 1';
        } else if (tabId === 'tab2') {
          content = 'Content for Tab 2';
        } else if (tabId === 'tab3') {
          content = 'Content for Tab 3';
        }

        // 更新内容区的文本
        $('#content').text(content);

        // 移动滑块到选中的tab位置
        var tabOffset = $(this).offset().left;
        var containerOffset = $('.tab-container').offset().left;
        var scrollLeft = tabOffset - containerOffset;
        var width = $(this).outerWidth();
        $('.slider').css({ 'left': scrollLeft, 'width': width });

        // 滚动到选中的tab位置
        $('.tab-container').scrollLeft(scrollLeft);
      });
    });
  </script>
</body>
</html>

在这里插入图片描述