Active link style

Question

There are tabs on pure CSS, but how to make the first link be active, have its own style, and when tabs are intertwined, the links also match the active ones. I try with :active :focus but this method only works while clicking on a tab. Using Js is, of course, easy to do, but is it possible without 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>

You know, I recently carefully researched, I did not see a nice, clean CSS solution.
@VadimOvchinnikov rights, here are some examples of tabs, some become active: css-tricks.com/examples/CSSTabs but frankly they are not suitable for dynamic layout, and look ugly in terms of implementation
I also thought of the place of references to use input type radio + label +: checked, but this approach is also not beautiful, so you still have to use a couple of lines of js.
@Shperung, input type radio + label +: checked - not a single string js

Accepted Answer · 2017-01-08T20:12:11

 /* Очищаем форматирование общего блока, чтоб 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>

The code is beautiful. The principle is the same. Making dopilita. The only drawback is that the active block can only be at the end because of the class inheritance to which the binding goes to hide the initial block. You can try to play with the float or with the structure as a whole, I think this point can be finished.

To understand the basic principles will need to read about:

Remains in the address bar id anchor, this is of course a good solution but because of the address bar cant
Can you add comments on the code and explain the principles?
The narrator from me is useless, if something is not clear, ask.
I see no sense in replacing flex, and most likely it will not work out (Just remove the float and understand what function it plays when building the whole structure).
At leisure, I will also think about how to move the active tab to the top of the list.
It is so, only all the points will need to be formed in the reverse order, however, this is not a big problem.
So far this is the only embodiment with the active block shifted to the left.
Or a small script that selects the desired value when loading the page.

Yuri yuri 13.3k five 36 82 · Answer 2 · 2017-01-08T19:53:31

You can use 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>

But agree, this implementation does not look very nice. So it is better to use javascript , so that there would be less hassle and crutches

Active link style

2 answers 2

More articles: