javascript - HTML Webページjsfiddleでタブが開かない

Question

タブ付きメニューを作成しました: http://jsfiddle.net/zWMYp/

ただし、Webページに追加すると、上記のようにタブのコンテンツが開きません: http://jsfiddle.net/vL5VJ/

何がタブに干渉しているのかわかりません。

score 0 · Accepted Answer

.css-tabs ul.noint11_menu li > div {
    z-index: -1;
}

犯人です。それを削除（および追加color: #fff）すると、機能します

score 0 · Accepted Answer

コード内の 2 つの問題 1) a href の下の div の z-index の z-index は -1 であるため、他のすべての背後にあります 2) テキストの色は背景とほぼ同じです

例としてこの css クラスを変更しました。div テキストの css カラーを定義するなど、他の方法を使用できます。

.css-tabs ul.noint11_menu li:target > div
{
    display:block;
    z-index:1;
    color:white;

}

ここに更新された jsfiddle リンクがあります http://jsfiddle.net/vM5VJ/3/

私のアドバイスは、google chrome を使用して要素を検査し、css を段階的に削除または追加して、どこに問題があるかを突き止めることです。非常に重要な問題を把握するためにコード全体を見るのは好きではありませんでした

2 に答える 2