为活跃的样式

时间：2016-12-16 10:45:00

标签： css tabs labels

我正在制作一个带有.png s菜单的标签。我使用标签有输入来显示正确的标签。

.pngs有一个hover-class但我试图在标签处于活动状态时保持活动状态。

你认为这可能吗？

＆＃13;
＆＃13; 
.tabs {
  width: 100%;
  max-width: 1290px;
  float: none;
  list-style: none;
  padding: 0;
  margin: 75px auto;
}
.tabs li {
  display: block;
}
.labels:after {
  content: '';
  display: table;
  clear: both;
}
.tabs label {
  display: inline-block;
  margin: 0px;
  height: 120px;
  padding: 0px 10px;
  color: #000;
  font-size: 24px;
  font-weight: normal;
  cursor: pointer;
  color: #F00;
}
.tab-img {
  margin: auto 5px;
  width: 100%;
  vertical-align: middle;
}
.rounded:hover {
  border-style: solid;
  border-width: medium;
  border-color: #3bbdbc;
  border-radius: 60px;
  margin: 5px;
}
.tab-contener {
  display: none;
  width: 100%;
  padding: 15px;
}
.tab-contener h2 {
  text-align: center;
}
.tab-contener p {
  text-align: center;
  font-size: 14px;
}
.tabs input[type=radio] {
  display: none;
}
[id^=tab]:checked ~ div[id^=tab-contener] {
  display: block;
}
[id^=tab]:checked ~ [id^=label] {
  background: #08C;
  color: white;
}
＆＃13; 
<head>
  <link rel="stylesheet" type="text/css" href="artist-tab.css" media="screen" />
</head>

<ul class="tabs">
  <li class="labels">
    <div style="text-align: center; margin-left: auto; margin-right: auto;">

      <label id="label1" for="tab1">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-leemo.png" alt="artiste leemo" width="95px" height="95px" />
      </label>
      <label id="label2" for="tab2">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-florent-bodart.png" alt="artiste florent bodart" width="95px" height="95px" />
      </label>
      <label id="label3" for="tab3">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-elisabeth-fredriksson.png" alt="artiste Elisabeth Fredriksson" width="95px" height="95px" />
      </label>
      <label id="label4" for="tab4">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-bleak-design.png" alt="artiste bleak design studio" width="95px" height="95px" />
      </label>
      <label id="label5" for="tab5">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-andreas-lie.png" alt="artiste andreas lie" width="95px" height="95px" />
      </label>
      <label id="label6" for="tab6">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-andrew-paranavitana.png" alt="artiste andrew paranavitana" width="95px" height="95px" />
      </label>
    </div>
  </li>

  <li>
    <input id="tab1" checked="checked" name="tabs" type="radio" />
    <div id="tab-contener1" class="tab-contener">
      <h3>Tab 1</h3>
    </div>
  </li>
  <li>
    <input id="tab2" name="tabs" type="radio" />
    <div id="tab-contener2" class="tab-contener">
      <h3>Tab 2</h3>
    </div>
  </li>
  <li>
    <input id="tab3" name="tabs" type="radio" />
    <div id="tab-contener3" class="tab-contener">
      <h3>Tab 3</h3>
    </div>
  </li>
  <li>
    <input id="tab4" name="tabs" type="radio" />
    <div id="tab-contener4" class="tab-contener">
      <h3>Tab 4</h3>
    </div>
  </li>
  <li>
    <input id="tab5" name="tabs" type="radio" />
    <div id="tab-contener5" class="tab-contener">
      <h3>Tab 5</h3>
    </div>
  </li>
  <li>
    <input id="tab6" name="tabs" type="radio" />
    <div id="tab-contener6" class="tab-contener">
      <h3>Tab 6</h3>
    </div>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

将此课程与其他课程一起添加：

label:focus .rounded,
.rounded:hover {

并将tabindex添加到label代码：

<label id="label1" for="tab1" tabindex="1">
  <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-leemo.png" alt="artiste leemo" width="95px" height="95px" />
</label>
<label id="label2" for="tab2" tabindex="1">
  <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-florent-bodart.png" alt="artiste florent bodart" width="95px" height="95px" />
</label>
<label id="label3" for="tab3" tabindex="1">
  <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-elisabeth-fredriksson.png" alt="artiste Elisabeth Fredriksson" width="95px" height="95px" />
</label>
<label id="label4" for="tab4" tabindex="1">
  <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-bleak-design.png" alt="artiste bleak design studio" width="95px" height="95px" />
</label>
<label id="label5" for="tab5" tabindex="1">
  <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-andreas-lie.png" alt="artiste andreas lie" width="95px" height="95px" />
</label>
<label id="label6" for="tab6" tabindex="1">
  <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-andrew-paranavitana.png" alt="artiste andrew paranavitana" width="95px" height="95px" />
</label>

输出：http://output.jsbin.com/bewiwivesu

<强>更新

为更好的用户体验添加了一些小改动：

.rounded {
  border: medium solid transparent;
  margin: 5px;
  border-radius: 60px;
}
label:focus {
  outline: none;
  box-shadow: none;
}
label:focus .rounded,
.rounded:hover {
  border-style: solid;
  border-width: medium;
  border-color: #3bbdbc;
}

<强>段 

.tabs {
  width: 100%;
  max-width: 1290px;
  float: none;
  list-style: none;
  padding: 0;
  margin: 75px auto;
}
.tabs li {
  display: block;
}
.labels:after {
  content: '';
  display: table;
  clear: both;
}
.tabs label {
  display: inline-block;
  margin: 0px;
  height: 120px;
  padding: 0px 10px;
  color: #000;
  font-size: 24px;
  font-weight: normal;
  cursor: pointer;
  color: #F00;
}
.tab-img {
  margin: auto 5px;
  width: 100%;
  vertical-align: middle;
}
.rounded {
  border: medium solid transparent;
  margin: 5px;
  border-radius: 60px;
}
label:focus {
  outline: none;
  box-shadow: none;
}
label:focus .rounded,
.rounded:hover {
  border-style: solid;
  border-width: medium;
  border-color: #3bbdbc;
}
.tab-contener {
  display: none;
  width: 100%;
  padding: 15px;
}
.tab-contener h2 {
  text-align: center;
}
.tab-contener p {
  text-align: center;
  font-size: 14px;
}
.tabs input[type=radio] {
  display: none;
}
[id^=tab]:checked ~ div[id^=tab-contener] {
  display: block;
}
[id^=tab]:checked ~ [id^=label] {
  background: #08C;
  color: white;
}
<ul class="tabs">
  <li class="labels">
    <div style="text-align: center; margin-left: auto; margin-right: auto;">

      <label id="label1" for="tab1" tabindex="1">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-leemo.png" alt="artiste leemo" width="95px" height="95px" />
      </label>
      <label id="label2" for="tab2" tabindex="1">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-florent-bodart.png" alt="artiste florent bodart" width="95px" height="95px" />
      </label>
      <label id="label3" for="tab3" tabindex="1">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-elisabeth-fredriksson.png" alt="artiste Elisabeth Fredriksson" width="95px" height="95px" />
      </label>
      <label id="label4" for="tab4" tabindex="1">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-bleak-design.png" alt="artiste bleak design studio" width="95px" height="95px" />
      </label>
      <label id="label5" for="tab5" tabindex="1">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-andreas-lie.png" alt="artiste andreas lie" width="95px" height="95px" />
      </label>
      <label id="label6" for="tab6" tabindex="1">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-andrew-paranavitana.png" alt="artiste andrew paranavitana" width="95px" height="95px" />
      </label>
    </div>
  </li>

  <li>
    <input id="tab1" checked="checked" name="tabs" type="radio" />
    <div id="tab-contener1" class="tab-contener">
      <h3>Tab 1</h3>
    </div>
  </li>
  <li>
    <input id="tab2" name="tabs" type="radio" />
    <div id="tab-contener2" class="tab-contener">
      <h3>Tab 2</h3>
    </div>
  </li>
  <li>
    <input id="tab3" name="tabs" type="radio" />
    <div id="tab-contener3" class="tab-contener">
      <h3>Tab 3</h3>
    </div>
  </li>
  <li>
    <input id="tab4" name="tabs" type="radio" />
    <div id="tab-contener4" class="tab-contener">
      <h3>Tab 4</h3>
    </div>
  </li>
  <li>
    <input id="tab5" name="tabs" type="radio" />
    <div id="tab-contener5" class="tab-contener">
      <h3>Tab 5</h3>
    </div>
  </li>
  <li>
    <input id="tab6" name="tabs" type="radio" />
    <div id="tab-contener6" class="tab-contener">
      <h3>Tab 6</h3>
    </div>
  </li>
</ul>

输出：http://output.jsbin.com/budeyinefu/1

答案 1 :(得分：-1)

编辑：我知道没有蹩脚副作用的唯一方法是通过js。

请注意html中的onclick修改以及我添加到文件中的CSS声明。

function changeActive(elem) {
    // get all 'a' elements
    var a = document.getElementsByClassName('rounded');
    // loop through all 'a' elements
    for (i = 0; i < a.length; i++) {
        // Remove the class 'active' if it exists
        a[i].classList.remove('active')
    }
    // add 'active' classs to the element that was clicked
    elem.classList.add('active');
}
.tabs {
  width: 100%;
  max-width: 1290px;
  float: none;
  list-style: none;
  padding: 0;
  margin: 75px auto;
}
.tabs li {
  display: block;
}
.labels:after {
  content: '';
  display: table;
  clear: both;
}
.tabs label {
  display: inline-block;
  margin: 0px;
  height: 120px;
  padding: 0px 10px;
  color: #000;
  font-size: 24px;
  font-weight: normal;
  cursor: pointer;
  color: #F00;
}
.tab-img {
  margin: auto 5px;
  width: 100%;
  vertical-align: middle;
}
.rounded:hover {
  border-style: solid;
  border-width: medium;
  border-color: #3bbdbc;
  border-radius: 60px;
  margin: 5px;
}
.tab-contener {
  display:
    none;
  width: 100%;
  padding: 15px;
}
.tab-contener h2 {
  text-align: center;
}
.tab-contener p {
  text-align: center;
  font-size: 14px;
}
.tabs input[type=radio] {
  display: none;
}
[id^=tab]:checked ~ div[id^=tab-contener] {
  display: block;
}
[id^=tab]:checked ~ [id^=label] {
  background: #08C;
  color: white;
}

.rounded.active {
  border-style: solid;
  border-width: medium;
  border-color: #3bbdbc;
  border-radius: 60px;
  margin: 5px;
}
<head>
  <link rel="stylesheet" type="text/css" href="artist-tab.css" media="screen" />
</head>

<ul class="tabs">
  <li class="labels">
    <div style="text-align: center; margin-left: auto; margin-right: auto;">

      <label id="label1" for="tab1">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-leemo.png" alt="artiste leemo" width="95px" height="95px" onclick="changeActive(this)"/>
      </label>
      <label id="label2" for="tab2">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-florent-bodart.png" alt="artiste florent bodart" width="95px" height="95px" onclick="changeActive(this)"/>
      </label>
      <label id="label3" for="tab3">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-elisabeth-fredriksson.png" alt="artiste Elisabeth Fredriksson" width="95px" height="95px" onclick="changeActive(this)"/>
      </label>
      <label id="label4" for="tab4">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-bleak-design.png" alt="artiste bleak design studio" width="95px" height="95px" onclick="changeActive(this)"/>
      </label>
      <label id="label5" for="tab5">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-andreas-lie.png" alt="artiste andreas lie" width="95px" height="95px" onclick="changeActive(this)"/>
      </label>
      <label id="label6" for="tab6">
        <img class="rounded" src="http://labellegalerie.co/img/cms/home-artiste/artiste-andrew-paranavitana.png" alt="artiste andrew paranavitana" width="95px" height="95px" onclick="changeActive(this)"/>
      </label>
    </div>
  </li>

  <li>
    <input id="tab1" checked="checked" name="tabs" type="radio" />
    <div id="tab-contener1" class="tab-contener">
      <h3>Tab 1</h3>
    </div>
  </li>
  <li>
    <input id="tab2" name="tabs" type="radio" />
    <div id="tab-contener2" class="tab-contener">
      <h3>Tab 2</h3>
    </div>
  </li>
  <li>
    <input id="tab3" name="tabs" type="radio" />
    <div id="tab-contener3" class="tab-contener">
      <h3>Tab 3</h3>
    </div>
  </li>
  <li>
    <input id="tab4" name="tabs" type="radio" />
    <div id="tab-contener4" class="tab-contener">
      <h3>Tab 4</h3>
    </div>
  </li>
  <li>
    <input id="tab5" name="tabs" type="radio" />
    <div id="tab-contener5" class="tab-contener">
      <h3>Tab 5</h3>
    </div>
  </li>
  <li>
    <input id="tab6" name="tabs" type="radio" />
    <div id="tab-contener6" class="tab-contener">
      <h3>Tab 6</h3>
    </div>
  </li>
</ul>

相关问题
最新问题