淘先锋技术网

首页 1 2 3 4 5 6 7

html图片选项卡代码

HTML图片选项卡

图片选项卡是网站设计中常用的功能，可以让页面看起来更加美观和可交互。下面是一个HTML图片选项卡的代码实例：


<html>
<head>
  <title>HTML图片选项卡</title>
  <style>
    .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
      margin-top: 20px;
    }
    .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
    }
    .tab button.active {
      background-color: #ccc;
    }
    .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
    }
  </style>
</head>
<body>

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'London')">伦敦</button>
  <button class="tablinks" onclick="openTab(event, 'Paris')">巴黎</button>
  <button class="tablinks" onclick="openTab(event, 'Tokyo')">东京</button>
</div>

<div id="London" class="tabcontent">
  <img src="london.jpg" alt="伦敦" style="width:100%">
</div>

<div id="Paris" class="tabcontent">
  <img src="paris.jpg" alt="巴黎" style="width:100%">
</div>

<div id="Tokyo" class="tabcontent">
  <img src="tokyo.jpg" alt="东京" style="width:100%">
</div>

<script>
function openTab(evt, cityName) {
  // 获取所有的tab内容元素
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  // 将所有的tab内容元素隐藏
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // 获取所有tab按钮元素
  tablinks = document.getElementsByClassName("tablinks");
  // 将所有的tab按钮元素恢复正常状态
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // 获取被点击的tab按钮元素，添加active类
  evt.currentTarget.className += " active";
  // 获取被点击的tab内容元素，显示出来
  document.getElementById(cityName).style.display = "block";
}
</script>

</body>
</html>

html图片选项卡代码

以上代码中使用了class和id两种选择器来控制每个选项卡的样式，并使用JavaScript来控制选项卡的切换。其中，通过给选项卡按钮添加事件监听器来捕捉用户点击事件，然后根据按钮的ID属性来判断要显示哪个选项卡的内容，并将其他的选项卡内容隐藏起来。