一个 HTML 页面中的多个选项卡没有唯一引用(没有 ID 或类) [英] Multiple tabs in one HTML page without unique reference (no ID or class)

查看：36
本文介绍了一个 HTML 页面中的多个选项卡没有唯一引用(没有 ID 或类)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否可以在一个 HTML 页面中有多个选项卡而没有唯一引用，即没有 ID 或类作为单击选项卡时要显示的内容的引用.下面的代码只是为了可视化它的外观.它是纯 CSS 并使用 ID.一个 HTML 页面中应出现多个带有选项卡的此类部分.代码应该在没有任何手动预定义的东西的情况下工作，因为这种带有标签的代码模式应该在多个 HTML 页面上多次重复使用，因此，它应该是通用的.我正在考虑使用 JS 和 nextElementSibling 之类的潜在解决方案.任何人都可以支持并发布解决方案(不一定在示例中；最好使用纯 JS，没有库)?

 body {背景:#e0e0e0；}* {过渡:0.5s 缓入缓出；box-sizing: 边框框；}.手风琴{边距:94px 自动 0 自动；最大宽度:500px；高度:300px；位置:相对；}.accordion input.tab-toggle {位置:绝对；不透明度:0；}.accordion input.tab-toggle:checked + label {背景:白色；}.accordion input.tab-toggle:checked + label .tab-title:hover {背景:透明；}.accordion input.tab-toggle:checked + label .tab {可见性:可见；不透明度:1；}.手风琴标签{向左飘浮;字体大小:16px；行高:16px；边框半径:3px 3px 0 0;}.accordion label:first-of-type .tab {边框半径:0 3px 3px 3px;}.accordion 标签 .tab-title {显示:块；填充:20px；边框半径:3px 3px 0 0;}.accordion 标签 .tab-title:hover {光标:指针；背景:rgba(0, 0, 0, 0.1);}.accordion .tab {可见性:隐藏；不透明度:0；位置:绝对；填充:20px；顶部:56px；左:0；最小宽度:100%；高度:244px；背景:白色；边框半径:3px；}

<p>Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Pellentesque felis mi、vulputate et lorem quis、blandit pharetra metus.Donec viverra accumsan velit 在 ullamcorper.</p><div class="accordion"><input class="tab-toggle" type="radio" name="my_radio_group" id="tab_one" 选中/><label for="tab_one"><span class="tab-title">标签一</span><div class="tab" id="tab_one_wrapper"><p>嗨.我是标签一个人的内容.很高兴认识你.</p>

<input class="tab-toggle" type="radio" name="my_radio_group" id="tab_two"/><label for="tab_two"><span class="tab-title">标签二</span><div class="tab" id="tab_two_wrapper"><p>嗨.我是标签二的内容.很高兴认识你.</p>

<input class="tab-toggle" type="radio" name="my_radio_group" id="tab_three"/><label for="tab_three"><span class="tab-title">标签三</span><div class="tab" id="tab_three_wrapper"><p>嗨.我是标签三的内容.很高兴认识你.</p>

<input class="tab-toggle" type="radio" name="my_radio_group" id="tab_four"/><label for="tab_four"><span class="tab-title">标签四</span><div class="tab" id="tab_four_wrapper"><p>嗨.我是标签四的内容.很高兴认识你.</p>

<p>Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Pellentesque felis mi、vulputate et lorem quis、blandit pharetra metus.Donec viverra accumsan velit 在 ullamcorper.</p><div class="accordion"><input class="tab-toggle" type="radio" name="my_radio_group" id="tab_five"/><label for="tab_five"><span class="tab-title">标签五</span><div class="tab" id="tab_five_wrapper"><p>标签五</p>

<input class="tab-toggle" type="radio" name="my_radio_group" id="tab_six"/><label for="tab_six"><span class="tab-title">标签六</span><div class="tab" id="tab_six_wrapper"><p>六个</p>

<input class="tab-toggle" type="radio" name="my_radio_group" id="tab_seven"/><label for="tab_seven"><span class="tab-title">标签七</span><div class="tab" id="tab_seven_wrapper"><p>七</p>

<input class="tab-toggle" type="radio" name="my_radio_group" id="tab_eight"/><label for="tab_8"><span class="tab-title">标签八</span><div class="tab" id="tab_eight_wrapper"><p>八</p>

解决方案

如果你在 中插入你的单选按钮，你就不必使用 id:

body {背景:#e0e0e0；}* {过渡:0.5s 缓入缓出；box-sizing: 边框框；}.手风琴{边距:94px 自动 0 自动；最大宽度:500px；高度:300px；位置:相对；}.accordion input.tab-toggle {位置:绝对；不透明度:0；}.accordion 标签 input.tab-toggle:checked + .tab-title {背景:白色；}.accordion 标签 input.tab-toggle:checked ~ .tab {可见性:可见；不透明度:1；}.手风琴标签{向左飘浮;字体大小:16px；行高:16px；边框半径:3px 3px 0 0;}.accordion label:first-of-type .tab {边框半径:0 3px 3px 3px;}.accordion 标签 .tab-title {光标:指针；显示:块；填充:20px；边框半径:3px 3px 0 0;}.accordion 标签 .tab-title:hover {背景:rgba(0, 0, 0, 0.1);}.accordion .tab {可见性:隐藏；不透明度:0；位置:绝对；填充:20px；顶部:56px；左:0；最小宽度:100%；高度:244px；背景:白色；边框半径:3px；}

<p>Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Pellentesque felis mi、vulputate et lorem quis、blandit pharetra metus.Donec viverra accumsan velit 在 ullamcorper.</p><div class="accordion"><标签><input class="tab-toggle" type="radio" name="my_radio_group" 选中/><span class="tab-title">标签一</span><div class="tab"><p>嗨.我是标签一个人的内容.很高兴认识你.</p>

<标签><input class="tab-toggle" type="radio" name="my_radio_group"/><span class="tab-title">标签二</span><div class="tab"><p>嗨.我是标签二的内容.很高兴认识你.</p>

<标签><input class="tab-toggle" type="radio" name="my_radio_group"/><span class="tab-title">标签三</span><div class="tab"><p>嗨.我是标签三的内容.很高兴认识你.</p>

<标签><input class="tab-toggle" type="radio" name="my_radio_group"/><span class="tab-title">标签四</span><div class="tab"><p>嗨.我是标签四的内容.很高兴认识你.</p>

<p>Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Pellentesque felis mi、vulputate et lorem quis、blandit pharetra metus.Donec viverra accumsan velit 在 ullamcorper.</p><div class="accordion"><标签><input class="tab-toggle" type="radio" name="my_radio_group"/><span class="tab-title">标签五</span><div class="tab"><p>标签五</p>

<标签><input class="tab-toggle" type="radio" name="my_radio_group"/><span class="tab-title">标签六</span><div class="tab"><p>六个</p>

<标签><input class="tab-toggle" type="radio" name="my_radio_group"/><span class="tab-title">标签七</span><div class="tab"><p>七</p>

<标签><input class="tab-toggle" type="radio" name="my_radio_group"/><span class="tab-title">标签八</span><div class="tab"><p>八</p>

Is it possible to have multiple tabs in one HTML page without unique reference, i.e. no IDs or classes as reference for the content to be displayed when clicking the tab. The code below is just to visualize it how it could look like. It is pure CSS and uses IDs. Multiple of such sections with the tabs should appear in one HTML page. The code should work without any manually predefined stuff since this code pattern with tabs should be reused multiple times on multiple HTML pages, hence, it should be generic. I was thinking of a potential solution with JS and nextElementSibling or suchlike. Can anyone support and post a solution (not necessarily in the example; ideally with pure JS, no library)?

    body {
  background: #e0e0e0;
}

* {
  transition: 0.5s ease-in-out;
  box-sizing: border-box;
}

.accordion {
  margin: 94px auto 0 auto;
  max-width: 500px;
  height: 300px;
  position: relative;
}
.accordion input.tab-toggle {
  position: absolute;
  opacity: 0;
}
.accordion input.tab-toggle:checked + label {
  background: white;
}
.accordion input.tab-toggle:checked + label .tab-title:hover {
  background: transparent;
}
.accordion input.tab-toggle:checked + label .tab {
  visibility: visible;
  opacity: 1;
}
.accordion label {
  float: left;
  font-size: 16px;
  line-height: 16px;
  border-radius: 3px 3px 0 0;
}
.accordion label:first-of-type .tab {
  border-radius: 0 3px 3px 3px;
}
.accordion label .tab-title {
  display: block;
  padding: 20px;
  border-radius: 3px 3px 0 0;
}
.accordion label .tab-title:hover {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.1);
}
.accordion .tab {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding: 20px;
  top: 56px;
  left: 0;
  min-width: 100%;
  height: 244px;
  background: white;
  border-radius: 3px;
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis mi, vulputate et lorem quis, blandit pharetra metus. Donec viverra accumsan velit at ullamcorper.
</p>
<div class="accordion">
  <input class="tab-toggle" type="radio" name="my_radio_group" id="tab_one" checked/>
  <label for="tab_one">
    <span class="tab-title">Tab One</span>
    <div class="tab" id="tab_one_wrapper">
      <p>Hi. I'm tab one's content. Nice to meet you.</p>
    </div>
  </label>

  <input class="tab-toggle" type="radio" name="my_radio_group" id="tab_two" />
  <label for="tab_two">
    <span class="tab-title">Tab Two</span>
    <div class="tab" id="tab_two_wrapper">
      <p>Hi. I'm tab two's content. Nice to meet you.</p>
    </div>
  </label>

  <input class="tab-toggle" type="radio" name="my_radio_group" id="tab_three" />
  <label for="tab_three">
    <span class="tab-title">Tab Three</span>
    <div class="tab" id="tab_three_wrapper">
      <p>Hi. I'm tab three's content. Nice to meet you.</p>
    </div>
  </label>

  <input class="tab-toggle" type="radio" name="my_radio_group" id="tab_four" />
  <label for="tab_four">
    <span class="tab-title">Tab Four</span>
    <div class="tab" id="tab_four_wrapper">
      <p>Hi. I'm tab four's content. Nice to meet you.</p>
    </div>
  </label>


</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis mi, vulputate et lorem quis, blandit pharetra metus. Donec viverra accumsan velit at ullamcorper.
</p>

<div class="accordion">

  <input class="tab-toggle" type="radio" name="my_radio_group" id="tab_five" />
  <label for="tab_five">
    <span class="tab-title">Tab Five</span>
    <div class="tab" id="tab_five_wrapper">
      <p>Tab Five</p>
    </div>
  </label>

  <input class="tab-toggle" type="radio" name="my_radio_group" id="tab_six"/>
  <label for="tab_six">
    <span class="tab-title">Tab Six</span>
    <div class="tab" id="tab_six_wrapper">
      <p>Six</p>
    </div>
  </label>

  <input class="tab-toggle" type="radio" name="my_radio_group" id="tab_seven" />
  <label for="tab_seven">
    <span class="tab-title">Tab Seven</span>
    <div class="tab" id="tab_seven_wrapper">
      <p>Seven</p>
    </div>
  </label>

  <input class="tab-toggle" type="radio" name="my_radio_group" id="tab_eight" />
  <label for="tab_eight">
    <span class="tab-title">Tab Eight</span>
    <div class="tab" id="tab_eight_wrapper">
      <p>Eight</p>
    </div>
  </label>
</div>

解决方案

If you insert your radio buttons inside <label> you don't have to use ids:

body {
  background: #e0e0e0;
}

* {
  transition: 0.5s ease-in-out;
  box-sizing: border-box;
}

.accordion {
  margin: 94px auto 0 auto;
  max-width: 500px;
  height: 300px;
  position: relative;
}
.accordion input.tab-toggle {
  position: absolute;
  opacity: 0;
}
.accordion label input.tab-toggle:checked + .tab-title {
  background: white;
}
.accordion label input.tab-toggle:checked ~ .tab {
  visibility: visible;
  opacity: 1;
}
.accordion label {
  float: left;
  font-size: 16px;
  line-height: 16px;
  border-radius: 3px 3px 0 0;
}
.accordion label:first-of-type .tab {
  border-radius: 0 3px 3px 3px;
}
.accordion label .tab-title {
  cursor: pointer;
  display: block;
  padding: 20px;
  border-radius: 3px 3px 0 0;
}
.accordion label .tab-title:hover {
  background: rgba(0, 0, 0, 0.1);
}
.accordion .tab {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding: 20px;
  top: 56px;
  left: 0;
  min-width: 100%;
  height: 244px;
  background: white;
  border-radius: 3px;
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis mi, vulputate et lorem quis, blandit pharetra metus. Donec viverra accumsan velit at ullamcorper.
</p>
<div class="accordion">
  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group" checked/>
    <span class="tab-title">Tab One</span>
    <div class="tab">
      <p>Hi. I'm tab one's content. Nice to meet you.</p>
    </div>
  </label>

  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group" />
    <span class="tab-title">Tab Two</span>
    <div class="tab">
      <p>Hi. I'm tab two's content. Nice to meet you.</p>
    </div>
  </label>

  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group" />
    <span class="tab-title">Tab Three</span>
    <div class="tab">
      <p>Hi. I'm tab three's content. Nice to meet you.</p>
    </div>
  </label>

  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group" />
    <span class="tab-title">Tab Four</span>
    <div class="tab">
      <p>Hi. I'm tab four's content. Nice to meet you.</p>
    </div>
  </label>


</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis mi, vulputate et lorem quis, blandit pharetra metus. Donec viverra accumsan velit at ullamcorper.
</p>

<div class="accordion">

  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group" />
    <span class="tab-title">Tab Five</span>
    <div class="tab">
      <p>Tab Five</p>
    </div>
  </label>

  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group"/>
    <span class="tab-title">Tab Six</span>
    <div class="tab">
      <p>Six</p>
    </div>
  </label>

  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group" />
    <span class="tab-title">Tab Seven</span>
    <div class="tab">
      <p>Seven</p>
    </div>
  </label>

  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group" />
    <span class="tab-title">Tab Eight</span>
    <div class="tab">
      <p>Eight</p>
    </div>
  </label>
</div>

这篇关于一个 HTML 页面中的多个选项卡没有唯一引用(没有 ID 或类)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆