1. дома
  2. Вопрос и ответ
  3. Укладка для активного

Укладка для активного

2016-12-16 3 views
-1

Я строю вкладку с меню из .png s. Я использую метки для ввода правильной вкладки.Укладка для активного

. .pngs имеет hover-class, но я стараюсь оставаться активным, когда ярлык активен.

Как вы думаете, это возможно?

.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; 
 
}
<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>

источник

2016-12-16 Nico38

+2

Да, я думаю, что это возможно. – connexo

ответ

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

Обновлено

Добавлено некоторые незначительные изменения для улучшения UX:

.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; 
}

Snippet

.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

источник

2016-12-16 10:52:45

+0

Спасибо за ваш ответ !! Действительно Ницца :) Это привело меня к другой проблеме, заключается в том, что мне нужно установить первую метку как активную, когда загружается страница. – Nico38

+0

Я пробовал набор class = "active" для первого ярлыка, но он не работал ... – Nico38

+0

@ Nico38 Он работает в отрывке в ответе? –

-1

Edit: единственный способ, который я знаю без паршивых побочных эффектов через JS.

Обратите внимание на модификацию onclick в html и объявление 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>

источник

2016-12-16 10:59:25 Carele

+0

'[...] Вы должны использовать javascript здесь. [...] '** 1. ** Нет! Это можно сделать только с помощью CSS. ** 2. ** У OP нет метки JavaScript. Если вы не верите, см. Мой ответ. –

+1

Спасибо большое :) Как я работаю на prestashop, я не мог добавить js на страницу cms :(это sh **! – Nico38

Смежные вопросы

 Смежные вопросы