0

我想将标签设置为默认值（标签 #1）

我的问题可能与社区中的许多其他人非常相似，但是......我想在我的一个非常具体的代码中解决一个具体问题。

https://codepen.io/anon/pen/WqBvPG

HTML：

<html>
  <head>
    <title>Tab switching divs template</title>
  </head>
<body>
<div style="height:330px; position:relative;width:80%;" class="clearfix">
  <p style="position:relative; margin-left: 3%; top:20px;"><strong>By Rogerio Brito Soares - Stackoverflow</strong></p>
  <section>
    <div class="tab" tabindex="0">
      <button>Tab #1</button>
      <div class="div">
        <h1>Content for Tab #1</h1>
        Name<br/>
        Galaxy<br/>
        Planet<br/>
        Continent<br/>
        Country<br/>
        State/region<br/>
        City<br/>
        Address<br/>
        ZIP Code
      </div>
    </div>
    <div class="tab" tabindex="0">
      <button>Tab #2</button>
      <div class="div">
        <h1>Content for Tab #2</h1>
        Occupation<br/>
        Children<br/>
        Marital Status<br/>
        Gender<br/>
        Yearly salary<br/>
        Age
      </div>
    </div>
    <div class="tab" tabindex="0">
      <button>Tab #3</button>
      <div class="div">
        <h1>Content for Tab #3</h1>
        Credit Card Number<br/>
        No of installments<br/>
        Receipt of Invoice<br/>
        Customer Service<br/>
        Hired Plan<br/>
        Hired Service Period
      </div>
    </div>
  </section>
</div>
</body>
</html>

CSS：

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    /* [disabled]box-sizing: border-box; */
}

body{
    margin:0;
    background: none;
    font-family: 'Helvetica Neue','Helvetica', Arial, sans-serif;   
    /*background-size: 100% auto;*/
}

.clearfix:before, .clearfix:after {
  content: " ";
  display: table; }
.clearfix:after {
  clear: both; }

section {
  position: relative;
  width: auto;
  height: auto;
  z-index: 0;
  color: white;
  box-sizing: border-box;
  padding: 2%;
  margin-left:1.4%;
}


/* This section:after perhaps is the main issue. I think it would be nice to delete it or change it. I don't like absolute position, once I mean to produce something responsive in the near future */
section:after {
  content: 'Default - Click on a tab above! I want this to disappear!';
  position: absolute;
  left: 0;
  top: 55px;
  width: 90%;
  font-size: 100%;
  text-align: left;
  background-color: #5E6B7F;
  padding: 2%;
  margin-left:1.4%;
}

button {
  cursor: pointer;
  width: 100%;
  display: inline-block;
  background-color: #5E6B7F;
  color: white;
  text-align: center;
  transition: .25s ease;
  border: none;
  padding: 2%;
  font-size:90%;
  border-radius: 12px 12px 0 0;
}

div.tab:focus button, button:focus {
  background-color: #8DA1BF;
}

button:focus + .div, div.tab:focus .div {
  display: block;
  position: absolute;
  background-color: #5E6B7F;
  color:white;
  height: auto;
  width: 100%;
  left: 0;
  z-index: 2;
  outline: none;
  top: 55px;
  text-align: left;
  padding: 2%;
  margin-left: 1.4%;
}

.div {
  display: none;
  font-size: 100%;
}

div.tab {
  display: inline-block;
}

div.tab:focus {
  outline: none;
}

我想要这样的东西，但没有 Javascript，只有 CSS。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs_close

4

0 回答 0