.link {
width: 150px;
height: 40px;
background: #ccc;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
}
.link:before {
top: -5px;
left: -5px;
z-index: -1;
content: '';
width: 25px;
height: 25px;
display: block;
background: orange;
position: absolute;
}
.site-bg-0 {
background-image: url();
}
.site-bg-1 {
background-image: url();
}
.site-bg-2 {
background-image: url();
}
<ul>
<li class="tablinks" data-index="1">1</li>
<li class="tablinks" data-index="2">2</li>
<li class="tablinks" data-index="3">3</li>
</ul>
<div class="tabcontainer">
<div class="tabcontent">
1
</div>
<div class="tabcontent">
2
</div>
<div class="tabcontent">
3
</div>
</div>
<a href="#" data-index="2">2</a>
function openTab(curIndex) {
const tabcontent = document.getElementsByClassName('tabcontent');
tabcontent.forEach((one, index) => {
one.style.display = index != curIndex ? 'none' : 'flex';
});
const tablinks = document.getElementsByClassName('tablinks');
tablinks.forEach((one, index) => {
if (index != curIndex) one.classList.remove('active');
else if (!one.classList.has('active')) one.classList.add('active');
});
}
const links = document.querySelector('[data-index]');
links.forEach(one => {
one.addEventListener('click', () => openTab(one.dataset.index));
});
<div class="wrap">
<p>Мало текста<p>
<div class="more_info" style="display:none">много текста</div>
<div class="more" data-text="Скрыть">Подробнее</div>
</div>
$('.more').on('click', function() {
const $t = $(this);
const text = $t.text();
$t.text($t.data('text'));
$t.data('text', text);
$('.more_info').slideToggle();
});
#id :-webkit-any(input, button, fieldset) { ... }
#id :-moz-any(input, button, fieldset) { ... }
#id :matches(input, button, fieldset) { ... }
#id :is(input, button, fieldset) { ... }
const data = {
Россия: ['Москва', 'Санкт-Петербург', 'Воронеж'],
Беларусь: ['Минск', 'Витебск', 'Орша'],
Украина: ['Киев', 'Львов', 'Харьков']
};
const countriesSelect = document.querySelector('#countries-select');
const citiesSelect = document.querySelector('#cities-select');
const paragraph = document.querySelector('p');
addOptions(countriesSelect, Object.keys(data));
addOptions(citiesSelect, data[countries[0]]);
countriesSelect.addEventListener('change', function() {
citiesSelect.length = 0;
addOptions(citiesSelect, data[countriesSelect.value]);
changeText();
});
countriesSelect.addEventListener('change', changeText);
function setOptions(select, arr) {
arr.forEach(val => select.add(new Option(val)));
}
function changeText() {
paragraph.innerHTML = countriesSelect.value +','+ citiesSelect.value;
}
path.animate({ d: "M320 0 C480 "+(screenHeight/4)+" 480 "+(screenHeight*3/4)+" 320 "+screenHeight+" L0 "+screenHeight+" L0 300 L0 0 Z" }, 500, function() { /* ... */ });
nav {
height: 100vh;
overflow-y: hidden;
}
nav.open {
overflow-y: auto;
}