Question

我的contact.html文件上有谷歌地图和联系表格。它们默认显示为块。我想将它改成标签式外观。假设我在HTML中有这样的代码：

<div id="tab-group" class="tab-group">              
<h3 class="tab-header activate" id="tab-header-1">We are here</h3>
        <div class="tab-content activate" id="tab-content-1"></div>
    <h3 class="tab-header" id="tab-header-2">Contact us</h3>
        <div class="tab-content" id="tab-content-2">

该div中的内容与id =“tab-content-1”，我有一个谷歌地图，头部有必要的脚本。在id =“tab-content-2”的div中，我有一个像;

这样的联系表单

<form class="tab-content-2" method="post" action="contact-post.html">
     <div>
        <span><label>NAME</label></span>
        <span><input name="userName" type="text" class="textbox"></span>
     </div>
     <div>
        <span><label>E-MAIL</label></span>
        <span><input name="userEmail" type="text" class="textbox"></span>
     </div>
     <div>
        <span><label>PHONE</label></span>
        <span><input name="userPhone" type="text" class="textbox"></span>
     </div>
     <div>
        <span><label>YOUR MESSAGE</label></span>
        <span><textarea name="userMsg"> </textarea></span>
     </div>
     <div>
        <span><input type="submit" value="Send me"></span>
     </div>
</form>

这是JavaScript：

"use strict";

 document.addEventListener('DOMContentLoaded', function() {
document.getElementById('tab-group').className = 'activate';

var headerClass = 'tab-header',
    contentClass = 'tab-content';

document.getElementById('tab-group').addEventListener('click', function(event) {

    var myHeader = event.target;

    if (myHeader.className !== headerClass) return;

    var myID = myHeader.id, // e.g. tab-header-1
        contentID = myID.replace('header', 'content'); // result: tab-content-1

    deactivateAllTabs();

    myHeader.className = headerClass + ' activate';
    document.getElementById(contentID).className = contentClass + ' activate';
});

function deactivateAllTabs() {
    var tabHeaders = document.getElementsByClassName(headerClass),
        tabContents = document.getElementsByClassName(contentClass);

    for (var i = 0; i < tabHeaders.length; i++) {
        tabHeaders[i].className = headerClass;
        tabContents[i].className = contentClass;
    }
}
});

我知道我必须清理所有这些但我迷失在这样一个基本的东西并生气，这里是CSS：

#tab-group h3 {
text-align: left;
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
.activate {
position: relative;
margin-bottom: 2em;
}

#tab-group.activate .tab-header {
font-weight: normal;
font-size: 13px;
text-transform: uppercase;
padding: 4px 6px;
display:inline;
}

   .activate .tab-header {
position: absolute;
top: 0;
margin: 0;
padding: 0.25em 0.5em;
left: 0;
background: rgba(168, 161, 152, 0.34);
border: 1px solid #161616;
border-radius: 4px 4px 0 0;
z-index: 2;
cursor: pointer;
   }

  .activate .tab-header.activate {
background: #000;
  }

  .activate .tab-content {
position: relative;
top: 0;
margin: 0;
padding: 0.5em;
top: 24px;
border: 1px solid #999;
z-index: 1;
background: white;
zoom: 1;
  }

  .activate .tab-content:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
  }

  .activate #tab-header-2 {
left: 9em;
  }
  .activate .tab-content {

  }

  .activate .tab-content:active {
display: block;
  }

  #tab-content-1 {
width: 56.4em;
    height:30em;
  }
  #tab-header-1 {
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
  }
  #tab-header-2 {
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
  }
  #tab-content-2{
position:relative;
padding-bottom:30px;
background-color:#000;

  }

我希望它像一个简单的标签内容。但是，选项卡的内容显示为块，当您单击h3选项卡标题时，它不会更改内容。它看起来像这..... it looks like this..... 我究竟做错了什么？提前谢谢......

Answer 1

这应该只是一个简单的修复。尝试添加：

.activate .tab-content { display: none; }
.activate .tab-content.activate { display: block; }

这样，只有活动标签可见，其他标签隐藏。

检查出来：http://jsfiddle.net/t8G57/2/

这个标签内容有什么问题？

1 个答案: