主動造型

-1

我在製作一個選項卡，其菜單由.png組成。我使用的標籤有輸入來顯示正確的選項卡。主動造型

該.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

是的，我認爲這是可能的。 – connexo

添加了這個類與其他一起：

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

片段

.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

感謝您的回答！真的很好:) 這導致我另一個問題，是我需要設置第一個標籤爲活動，當頁面加載。 – Nico38

我嘗試爲第一個標籤設置class =「active」，但它不起作用... – Nico38

@ Nico38它在答案的代碼段中工作嗎？ –

-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>

來源

2016-12-16 10:59:25 Carele

'[...]你應該在這裏使用javascript。 [...] ** 1。**否！它可以單獨使用CSS完成。 ** 2。** OP沒有標記JavaScript。如果你不相信，請看我的答案。 –

非常感謝:) 當我在prestashop上工作時，我無法將js添加到cms頁面:(這是sh **！ – Nico38

回答

相關問題