使用純CSS在WordPress帖子中添加標籤不起作用

-1

我發現了我想在我的WordPress帖子https://webdesignerhut.com/examples/pure-css-tabs/中使用的純CSS標籤。

當我在使用後，它看起來凌亂：
example 使用純CSS在WordPress帖子中添加標籤不起作用

我用這個HTML代碼到WordPress的文本編輯器：

.tabs { 
 
    max-width: 90%; 
 
    float: none; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 75px auto; 
 
    border-bottom: 4px solid #ccc; 
 
} 
 
.tabs:after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.tabs input[type=radio] { 
 
    display:none; 
 
} 
 
.tabs label { 
 
    display: block; 
 
    float: left; 
 
    width: 33.3333%; 
 
    color: #ccc; 
 
    font-size: 30px; 
 
    font-weight: normal; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    line-height: 2; 
 
    cursor: pointer; 
 
    box-shadow: inset 0 4px #ccc; 
 
    border-bottom: 4px solid #ccc; 
 
    -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */ 
 
    transition: all 0.5s; 
 
} 
 
.tabs label span { 
 
    display: none; 
 
} 
 
.tabs label i { 
 
    padding: 5px; 
 
    margin-right: 0; 
 
} 
 
.tabs label:hover { 
 
    color: #3498db; 
 
    box-shadow: inset 0 4px #3498db; 
 
    border-bottom: 4px solid #3498db; 
 
} 
 
.tab-content { 
 
    display: none; 
 
    width: 100%; 
 
    float: left; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
    background-color:#ffffff; 
 
} 
 

 
.tab-content * { 
 
    -webkit-animation: scale 0.7s ease-in-out; 
 
    -moz-animation: scale 0.7s ease-in-out; 
 
    animation: scale 0.7s ease-in-out; 
 
} 
 
@keyframes scale { 
 
    0% { 
 
    transform: scale(0.9); 
 
    opacity: 0; 
 
    } 
 
    50% { 
 
    transform: scale(1.01); 
 
    opacity: 0.5; 
 
    } 
 
    100% { 
 
    transform: scale(1); 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.tabs [id^="tab"]:checked + label { 
 
    background: #FFF; 
 
    box-shadow: inset 0 4px #3498db; 
 
    border-bottom: 4px solid #3498db; 
 
    color: #3498db; 
 
} 
 
#tab1:checked ~ #tab-content1, 
 
#tab2:checked ~ #tab-content2, 
 
#tab3:checked ~ #tab-content3 { 
 
    display: block; 
 
} 
 

 
@media (min-width: 768px) { 
 
    .tabs i { 
 
     padding: 5px; 
 
     margin-right: 10px; 
 
    } 
 
    .tabs label span { 
 
     display: inline-block; 
 
    } 
 
    .tabs { 
 
    margin: 50px auto; 
 
    } 
 
}

<div class="tabs"> 
 
    <!-- Radio button and lable for #tab-content1 --> 
 
    <input type="radio" name="tabs" id="tab1" checked > 
 
    <label for="tab1"> 
 
     <i class="fa fa-html5"></i><span>Tab-1</span> 
 
    </label> 
 
    <!-- Radio button and lable for #tab-content2 --> 
 
    <input type="radio" name="tabs" id="tab2"> 
 
    <label for="tab2"> 
 
     <i class="fa fa-css3"></i><span>Tab-2</span> 
 
    </label> 
 
    <!-- Radio button and lable for #tab-content3 --> 
 
    <input type="radio" name="tabs" id="tab3"> 
 
    <label for="tab3"> 
 
     <i class="fa fa-code"></i><span>Tab-3</span> 
 
    </label> 
 
    <div id="tab-content1" class="tab-content"> 
 
     <h3>Tab-1 Title</h3> 
 
     <p>Tab-1 Content</p> 
 
    </div> <!-- #tab-content1 --> 
 
    <div id="tab-content2" class="tab-content"> 
 
     <h3>Tab-2 Title</h3> 
 
     <p>Tab-2 Content</p> 
 
    </div> <!-- #tab-content2 --> 
 
    <div id="tab-content3" class="tab-content"> 
 
     <h3>Tab-3 Title</h3> 
 
     <p>Tab-3 Content</p> 
 
    </div> <!-- #tab-content3 --> 
 
</div>

有什麼不對嗎？

來源

2016-12-05 Odie Ardhia

標籤頁的工作完美。我認爲你的WordPress的css重寫標籤的CSS http://codepen.io/santoshkhalse/pen/vyROEV –

你可以發佈URL的更多細節？ –

@SantoshKhalse對不起，我使用Xampp進行測試。 –

我覺得你的WordPress主題已經包含類名稱選項卡，以便使用不同類

只是重命名標籤到標籤-S

和標籤到標籤

它可能會解決你的問題試試這個.. 使用如下代碼：

<html> 
<head> 
<title> </title> 
<style> 
.tabs-s { 
    max-width: 90%; 
    float: none; 
    list-style: none; 
    padding: 0; 
    margin: 75px auto; 
    border-bottom: 4px solid #ccc; 
} 
.tabs-s:after { 
    content: ''; 
    display: table; 
    clear: both; 
} 
.tabs-s input[type=radio] { 
    display:none; 
} 
.tabs-s label { 
    display: block; 
    float: left; 
    width: 33.3333%; 
    color: #ccc; 
    font-size: 30px; 
    font-weight: normal; 
    text-decoration: none; 
    text-align: center; 
    line-height: 2; 
    cursor: pointer; 
    box-shadow: inset 0 4px #ccc; 
    border-bottom: 4px solid #ccc; 
    -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */ 
    transition: all 0.5s; 
} 
.tabs-s label span { 
    display: none; 
} 
.tabs-s label i { 
    padding: 5px; 
    margin-right: 0; 
} 
.tabs-s label:hover { 
    color: #3498db; 
    box-shadow: inset 0 4px #3498db; 
    border-bottom: 4px solid #3498db; 
} 
.tab-content { 
    display: none; 
    width: 100%; 
    float: left; 
    padding: 15px; 
    box-sizing: border-box; 
    background-color:#ffffff; 
} 

.tab-content * { 
    -webkit-animation: scale 0.7s ease-in-out; 
    -moz-animation: scale 0.7s ease-in-out; 
    animation: scale 0.7s ease-in-out; 
} 
@keyframes scale { 
    0% { 
    transform: scale(0.9); 
    opacity: 0; 
    } 
    50% { 
    transform: scale(1.01); 
    opacity: 0.5; 
    } 
    100% { 
    transform: scale(1); 
    opacity: 1; 
    } 
} 

.tabs-s [id^="tab"]:checked + label { 
    background: #FFF; 
    box-shadow: inset 0 4px #3498db; 
    border-bottom: 4px solid #3498db; 
    color: #3498db; 
} 
#tab1:checked ~ #tab-content1, 
#tab2:checked ~ #tab-content2, 
#tab3:checked ~ #tab-content3 { 
    display: block; 
} 

@media (min-width: 768px) { 
    .tabs-s i { 
     padding: 5px; 
     margin-right: 10px; 
    } 
    .tabs-s label span { 
     display: inline-block; 
    } 
    .tabs-s { 
    margin: 50px auto; 
    } 
} 


</style> 
</head> 
<body> 
<div class="tabs-s"> 
    <!-- Radio button and lable for #tab-content1 --> 
    <input type="radio" name="tabs-s" id="tab1" checked > 
    <label for="tab1"> 
     <i class="fa fa-html5"></i><span>Tab-1</span> 
    </label> 
    <!-- Radio button and lable for #tab-content2 --> 
    <input type="radio" name="tabs-s" id="tab2"> 
    <label for="tab2"> 
     <i class="fa fa-css3"></i><span>Tab-2</span> 
    </label> 
    <!-- Radio button and lable for #tab-content3 --> 
    <input type="radio" name="tabs-s" id="tab3"> 
    <label for="tab3"> 
     <i class="fa fa-code"></i><span>Tab-3</span> 
    </label> 
    <div id="tab-content1" class="tab-content"> 
     <h3>Tab-1 Title</h3> 
     <p>Tab-1 Content</p> 
    </div> <!-- #tab-content1 --> 
    <div id="tab-content2" class="tab-content"> 
     <h3>Tab-2 Title</h3> 
     <p>Tab-2 Content</p> 
    </div> <!-- #tab-content2 --> 
    <div id="tab-content3" class="tab-content"> 
     <h3>Tab-3 Title</h3> 
     <p>Tab-3 Content</p> 
    </div> <!-- #tab-content3 --> 
</div> 
</body> 
</html>

編碼愉快:)

來源

2016-12-05 08:18:24

仍然不能，但謝謝 –

更改此類名 –

tab-content在所有地方的tab-s-content .... –

使用純CSS在WordPress帖子中添加標籤不起作用

回答

相關問題