主页 / 问题 / 612309
Accepted
Shperung
Asked:2020-01-09 02:16:59 +0000 UTC2020-01-09 02:16:59 +0000 UTC

活动链接的样式

  • 772

纯CSS有tabs，但是如何让第一个链接active，有自己的style，当tabs被点击的时候，links也变成active。我尝试使用:active，:focus但此方法仅在按下选项卡时有效。有了Js，这当然好办，但是没有JS能行吗？

.target:not(:target),
:target ~ .target.default-target {
  display: none;
}
.target:target,
.target.default-target {
  display: block;
}

a:active, a:focus{
  background-color: #7B7B7B;
  padding:3px;
}
<ul>
  <li><a href="#id1">Блок 1</a>
  </li>
  <li><a href="#id2">Блок 2</a>
  </li>
  <li><a href="#id3">Блок 3</a>
  </li>
  <li><a href="#id4">Блок 4</a>
  </li>
</ul>

<div class="target" id="id2">
  <p>Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante.
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

<div class="target" id="id3">
  <p>Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>

<div class="target" id="id4">
  <p>Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas.</p>
</div>

<div class="target default-target" id="id1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in.</p>
</div>

html

2 个回答

  1. Best Answer

    /* Очищаем форматирование общего блока, чтоб float не вилял на
размещенные элементы после табов */
#tabs::after {
  display: block;
  content: "";
  clear: both;
}

/* Предотвращаем прокрутку к tab-content при нажатии на ссылку */
.tab-switch {
  position: fixed;
}

.tab-link {
  display: inline-block;
}

/* Блок с содержимым изначально сокрытый и имеет параметр float:right
для смещения под .tab-link. Если убрать float или заменить его на flex,
.tab-link будет смещаться при переключении. Тут же указано наследование
стиля при нажатии на ссылку, чтоб спрятать изначально активный блок.
Если класс .active разместить в начале кода, то при нажатии на ссылку
не будет срабатывать наследование между родственными селекторами, так
как ссылка в коде будет после данного блока. */
.tab-content,
.tab-switch:target ~ .tab-content.active {
  box-sizing: border-box;
  float: right;
  display: none;
  width: 100%;
}
/* Включаем сокрытый блок используя target и id прописанный в href */
.tab-switch:target + .tab-link + .tab-content,
.tab-content.active{
  display: block;
}

#tabs {
  font-size: 0;
}

/* Описание стиля кнопок переключения табов и аналогичная работа с
оформлением этих кнопок как в переключение скрытых блоков */
.tab-link,
:target ~ .tab-link.active {
  margin-left: 0;
  margin-top: 10px;
  padding: 10px;
  background: transparent;
  text-decoration: none;
  font-size: 18px;
  color: #333;
}
.tab-link:hover {
  background-color: white;
  color: black;
}

.tab-switch:target + .tab-link,
.tab-link.active {
  background-color: #eee;
  color: black;
}

/* Это просто внешний вид */
.tab-content {
  background-color: #eee;
  padding: 5px 15px;
  font-size: 13px;
}
.tab-content p {
  line-height: 1.65;
}
.tab-content ul, .tab-content ol {
  padding: 0 0 0 15px;
  margin: 0;
  line-height: 1.25;
}
.tab-content ul > li, .tab-content ol > li {
  margin: 5px 0;
}
    <div id="tabs">
    <span id="tab-1" class="tab-switch"></span>
    <a href="#tab-1" class="tab-link">Таб 1</a>
    <div class="tab-content">
        <h2>Таб 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet commodi cupiditate molestias laboriosam sit! Delectus magni esse magnam libero laboriosam aspernatur voluptates, natus aliquid sed doloremque architecto provident, impedit saepe. Mollitia eum qui, quae laboriosam, magni aut similique asperiores error dicta totam ad, deserunt nemo repudiandae maxime, expedita. Id, numquam, laboriosam. Voluptatibus, saepe! Eligendi assumenda ullam modi explicabo voluptas qui veniam repellat ipsam similique dolore, mollitia quam dolores quae cumque neque officia. Laudantium, ratione sint quo molestiae sapiente dolores, doloremque modi illo quia tempora asperiores ullam perspiciatis fuga quasi maxime nesciunt ab suscipit harum quam. Eligendi dicta suscipit dolorum.</p>
    </div>

    <span id="tab-2" class="tab-switch"></span>
    <a href="#tab-2" class="tab-link">Таб 2</a>
    <div class="tab-content">
        <h2>Таб 2</h2>
        <ul>
           <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
           <li>Aliquam tincidunt mauris eu risus.</li>
           <li>Vestibulum auctor dapibus neque.</li>
        </ul>
    </div>

    <span id="tab-3" class="tab-switch"></span>
    <a href="#tab-3" class="tab-link active">Таб 3</a>
    <div class="tab-content active">
        <h2>Таб 3</h2>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
</div>

    代码很漂亮。原理是一样的。完成布局。唯一不利的是，由于绑定要隐藏初始块的类的继承，活动块只能在末尾。大家可以尝试玩一下float或者整个结构体，我觉得这点是可以做到的。

    要了解基本原理，您需要阅读以下内容：

    • 4

  2. 可以完成input radio：

    .target {
  display: none;
}
input#t1:checked ~ .target#id1 {display: block;}
input#t2:checked ~ .target#id2 {display: block;}
input#t3:checked ~ .target#id3 {display: block;}
input#t4:checked ~ .target#id4 {display: block;}

input[type="radio"] {display:none;}

input#t1:checked ~ ul li label[for="t1"],
input#t2:checked ~ ul li label[for="t2"],
input#t3:checked ~ ul li label[for="t3"],
input#t4:checked ~ ul li label[for="t4"],
label:active {
  background-color: #7B7B7B;
  padding:3px;
}
    <input type="radio" name="tab" id="t1" checked>
<input type="radio" name="tab" id="t2">
<input type="radio" name="tab" id="t3">
<input type="radio" name="tab" id="t4">
<ul>
  <li>
    <label for="t1">Блок 1</label>
  </li>
  <li>
    <label for="t2">Блок 2</label>
  </li>
  <li>
    <label for="t3">Блок 3</label>
  </li>
  <li>
    <label for="t4">Блок 4</label>
  </li>
</ul>

<div class="target" id="id2">
  <p>Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante.
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

<div class="target" id="id3">
  <p>Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>

<div class="target" id="id4">
  <p>Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas.</p>
</div>

<div class="target default-target" id="id1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in.</p>
</div>

    但是你必须承认这个实现看起来不太好。所以最好使用javascript，这样会少一些麻烦和拐杖

    • 0

相关问题