javascript - 主选项卡需要仅使用 html、css 和 javascript 嵌套的子选项卡

标签 javascript html css

当用户点击一个选项卡时，另一个选项卡应该在主选项卡中弹出，并且根据第二个选项卡选择输入字段应该弹出，其他选项卡隐藏。类似 expedia.com 的嵌套选项卡，基本上带有输入字段

我已经尝试了选项卡 View 选项和输入字段，但我无法在主选项卡下获得第二个选项卡 View 。

我需要同样的方式expedia做

提交按钮应该适用于各个选项卡。

.tabs {
  position: relative;
  margin: 0;
  padding: 15px;
  font-size: 0;
}

.tabs li {
  display: inline-block;
  margin-right: 1px;
  list-style-type: none;
  font-size: 14px;
}

.tabs li:last-child { margin-right: 0; }

.tabs li a {
  display: block;
  padding: 10px 15px;
  background: rgba(219,219,219,1);
  text-decoration: none;
  color: #4B5056;
  transition: background 0.5s ease;
}

.tabs a + div {
  position: absolute;
  left: 0;
  height: 0;
  padding: 0 15px;
  overflow: hidden;
}

.tabs :target a { background: rgba(219,219,219,0); }

.tabs :target a + div {
  height: 100%;
  overflow: visible;
}

@media (max-width: 768px) {

.tabs a { width: 100%; }

.tabs a + div {
  position: static;
  float: left;
}

.tabs li {
  display: block;
  overflow: hidden;
  margin: 0 0 1px 0;
}
}

input {
    display:block;
}

textarea {
    display:block;
}

select {
    display:block;
}

p {
    color:#000000;
    font-size:15px;
    font-weight:bold;
}
h3 {
    font-size:15px;
    text-align:left;
    padding:5px;
    margin-left:50px;
}
<form>
    <h3>Travel Registration Form</h3>
<ul class="tabs">
  <li id="option1">
      <a href="#option1">Complex</a>
      <div>
         <p  class="form__field form__field--text" data-conditional="flight hotel travel"   ><span   class="form__input"  >Traveler's Information </span> </p> 
<label class="form__field form__field--text" data-conditional="flight hotel travel" for="name"> <span class="form__label"> Traveler Name </span><input class="form__input"   id="name" maxlength="80" name="name" size="20" type="text" />
</label><br>

<label class="form__field form__field--text" data-conditional="flight hotel travel" for="email">Email<input class="form__input" id="email" maxlength="80" name="email" size="20" type="text" /></label><br>

<label class="form__field form__field--text" data-conditional="flight hotel travel" > No Of Travellers:<input  id="00N8E000002AUuY" name="00N8E000002AUuY" size="20" type="text" class="form__input" /></label><br>



<p class="form__field form__field--text" data-conditional="flight hotel travel" ><span class="form__input">Trip Info</span></p>

<label class="form__field form__field--text" data-conditional="flight hotel travel" >
Travel Options:<select  id="00N8E000002AjRq"   class="form__input"   name="00N8E000002AjRq" title="Travel Options">
    <option value="">--None--</option>
    <option value="Flight">Flight</option>
<option value="Flight + Hotel">Flight + Hotel</option>
<option value="Flight + Hotel + Transfer">Flight + Hotel + Transfer</option>
<option value="Flight + Transfer">Flight + Transfer</option>
<option value="Eurostar">Eurostar</option>
<option value="Eurostar + Hotel">Eurostar + Hotel</option>
<option value="Eurostar + Hotel + Transfer">Eurostar + Hotel + Transfer</option>
<option value="Eurostar + Transfer">Eurostar + Transfer</option>
<option value="Train">Train</option>
<option value="Train + Hotel">Train + Hotel</option>
<option value="Train + Hotel + Transfer">Train + Hotel + Transfer</option>
<option value="Hotel">Hotel</option>
<option value="Hotel + Transfer">Hotel + Transfer</option>
<option value="Transfer">Transfer</option>
</select><br></label><br>




<label class="form__field form__field--text" data-conditional="flight hotel travel" >Special Requirements:<textarea  id="00N8E000002AXcw" name="00N8E000002AXcw" rows="3" type="text" wrap="soft"></textarea></label><br>

<br>
 <input type="submit" value="submit">
      </div>
  </li>
  <li id="option2">
      <a href="#option2">Enquiry</a>
      <div>
          <h2>Heading 2</h2>
          <p>Fill your details</p>
      </div>
  </li>
  <li id="option3">
      <a href="#option3">Transfer</a>
      <div>
          <h2>Transfer</h2>
         
<label class="form__field form__field--text" data-conditional="travel" >Pick Up Address:<textarea class="form__input"   id="00N8E000002AXcS" name="00N8E000002AXcS" rows="3" type="text" wrap="soft"></textarea></label><br>

<label class="form__field form__field--text" data-conditional="travel" >Pick Up Date:<span class="dateInput dateOnlyInput"><input class="form__input"   id="00N8E000002AXcX" name="00N8E000002AXcX" size="12" type="date" /></span></label><br>

<label class="form__field form__field--text" data-conditional="travel" >Pick Up Time:<span class="timeContainer"><input class="form__input"   id="00N8E000002AXcc" name="00N8E000002AXcc" placeholder="HH:MM" size="12" type="time" /></span></label><br>
<label class="form__field form__field--text" data-conditional="travel" >Drop Date:<span class="dateInput dateOnlyInput"><input class="form__input"  id="00N8E000002AXcm" name="00N8E000002AXcm" size="12" type="date" /></span></label><br>

<label class="form__field form__field--text" data-conditional="travel" >Drop Time:<span class="timeContainer"><input class="form__input"  id="00N8E000002AXcr" name="00N8E000002AXcr" placeholder="HH:MM" size="12" type="time" /></span></label><br>

<label class="form__field form__field--text" data-conditional="travel" >Drop Address:<textarea class="form__input"   id="00N8E000002AXch" name="00N8E000002AXch" rows="3" type="text" wrap="soft"></textarea></label><br>
      </div>
  </li>
</ul>
</form>

最佳答案

您使用了“href”属性，因此显示了顶部的页面默认操作。需要添加一些脚本来停止默认操作。 试试下面的代码:

$('.tabs li a').on('click', function(ev) {
  ev.preventDefault();
  $('.tab_content').css({
    "height": "0px",
    "overflow": "hidden"
  });
  var id = $(this).attr('href');
  $('.tab_content[data-id="'+ id +'"]').css({
    "height": "100%",
    "overflow": "visible"
  });
});
.tabs {
  position: relative;
  margin: 0;
  padding: 15px;
  font-size: 0;
}

.tabs li {
  display: inline-block;
  margin-right: 1px;
  list-style-type: none;
  font-size: 14px;
}

.tabs li:last-child { margin-right: 0; }

.tabs li a {
  display: block;
  padding: 10px 15px;
  background: rgba(219,219,219,1);
  text-decoration: none;
  color: #4B5056;
  transition: background 0.5s ease;
}

.tabs a + div {
  position: absolute;
  left: 0;
  height: 0;
  padding: 0 15px;
  overflow: hidden;
}

.tabs :target a { background: rgba(219,219,219,0); }

.tabs :target a + div {
  height: 100%;
  overflow: visible;
}

@media (max-width: 768px) {

.tabs a { width: 100%; }

.tabs a + div {
  position: static;
  float: left;
}

.tabs li {
  display: block;
  overflow: hidden;
  margin: 0 0 1px 0;
}
}

input {
    display:block;
}

textarea {
    display:block;
}

select {
    display:block;
}

p {
    color:#000000;
    font-size:15px;
    font-weight:bold;
}
h3 {
    font-size:15px;
    text-align:left;
    padding:5px;
    margin-left:50px;
}
<form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <h3>Travel Registration Form</h3>
<ul class="tabs">
  <li id="option1">
      <a href="#option1">Complex</a>
      <div class="tab_content" data-id="#option1">
         <p  class="form__field form__field--text" data-conditional="flight hotel travel"   ><span   class="form__input"  >Traveler's Information </span> </p> 
<label class="form__field form__field--text" data-conditional="flight hotel travel" for="name"> <span class="form__label"> Traveler Name </span><input class="form__input"   id="name" maxlength="80" name="name" size="20" type="text" />
</label><br>

<label class="form__field form__field--text" data-conditional="flight hotel travel" for="email">Email<input class="form__input" id="email" maxlength="80" name="email" size="20" type="text" /></label><br>

<label class="form__field form__field--text" data-conditional="flight hotel travel" > No Of Travellers:<input  id="00N8E000002AUuY" name="00N8E000002AUuY" size="20" type="text" class="form__input" /></label><br>



<p class="form__field form__field--text" data-conditional="flight hotel travel" ><span class="form__input">Trip Info</span></p>

<label class="form__field form__field--text" data-conditional="flight hotel travel" >
Travel Options:<select  id="00N8E000002AjRq"   class="form__input"   name="00N8E000002AjRq" title="Travel Options">
    <option value="">--None--</option>
    <option value="Flight">Flight</option>
<option value="Flight + Hotel">Flight + Hotel</option>
<option value="Flight + Hotel + Transfer">Flight + Hotel + Transfer</option>
<option value="Flight + Transfer">Flight + Transfer</option>
<option value="Eurostar">Eurostar</option>
<option value="Eurostar + Hotel">Eurostar + Hotel</option>
<option value="Eurostar + Hotel + Transfer">Eurostar + Hotel + Transfer</option>
<option value="Eurostar + Transfer">Eurostar + Transfer</option>
<option value="Train">Train</option>
<option value="Train + Hotel">Train + Hotel</option>
<option value="Train + Hotel + Transfer">Train + Hotel + Transfer</option>
<option value="Hotel">Hotel</option>
<option value="Hotel + Transfer">Hotel + Transfer</option>
<option value="Transfer">Transfer</option>
</select><br></label><br>




<label class="form__field form__field--text" data-conditional="flight hotel travel" >Special Requirements:<textarea  id="00N8E000002AXcw" name="00N8E000002AXcw" rows="3" type="text" wrap="soft"></textarea></label><br>

<br>
 <input type="submit" value="submit">
      </div>
  </li>
  <li id="option2"> 
      <a href="#option2">Enquiry</a>
      <div class="tab_content" data-id="#option2">
          <h2>Heading 2</h2>
          <p>Fill your details</p>
      </div>
  </li>
  <li id="option3">
      <a href="#option3">Transfer</a>
      <div class="tab_content" data-id="#option3">
          <h2>Transfer</h2> 
         
<label class="form__field form__field--text" data-conditional="travel" >Pick Up Address:<textarea class="form__input"   id="00N8E000002AXcS" name="00N8E000002AXcS" rows="3" type="text" wrap="soft"></textarea></label><br>

<label class="form__field form__field--text" data-conditional="travel" >Pick Up Date:<span class="dateInput dateOnlyInput"><input class="form__input"   id="00N8E000002AXcX" name="00N8E000002AXcX" size="12" type="date" /></span></label><br>

<label class="form__field form__field--text" data-conditional="travel" >Pick Up Time:<span class="timeContainer"><input class="form__input"   id="00N8E000002AXcc" name="00N8E000002AXcc" placeholder="HH:MM" size="12" type="time" /></span></label><br>
<label class="form__field form__field--text" data-conditional="travel" >Drop Date:<span class="dateInput dateOnlyInput"><input class="form__input"  id="00N8E000002AXcm" name="00N8E000002AXcm" size="12" type="date" /></span></label><br>

<label class="form__field form__field--text" data-conditional="travel" >Drop Time:<span class="timeContainer"><input class="form__input"  id="00N8E000002AXcr" name="00N8E000002AXcr" placeholder="HH:MM" size="12" type="time" /></span></label><br>

<label class="form__field form__field--text" data-conditional="travel" >Drop Address:<textarea class="form__input"   id="00N8E000002AXch" name="00N8E000002AXch" rows="3" type="text" wrap="soft"></textarea></label><br>
      </div>
  </li>
</ul>
</form>

将数据属性添加到内容 div 并添加了类。查看代码。

关于javascript - 主选项卡需要仅使用 html、css 和 javascript 嵌套的子选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57373617/

上一篇：javascript - 在 Javascript 中调用嵌套的 div 类。修改后的代码在 WordPress 中不起作用

下一篇：css - Headless Chrome 没有检测到网页的 css 和背景图片

相关文章：

javascript - 使用范围 slider 过滤数据

javascript - Javascript 中函数绑定(bind)和闭包的区别？

html - 为什么要为外部 css 使用元标记 Content-Style-Type？

html - margin-block-start 和 margin-top 有什么区别？

javascript - Onmouseover/out 在 jQuery 中停用和重新激活

javascript - slider 的样式在 IE 中无法正常工作

javascript - 错误 : <toHaveBeenCalled> : Expected a spy, 但得到了功能

css - 有谁知道我如何调整这个 CSS 来实现我想要的超链接效果？

css - 尝试突出显示与 :active pseudoclass in cordova 的触摸

html - 将导航栏粘贴到居中图像

©2024 IT工具网  联系我们