1

4 つのメニュー項目にそれぞれ画像があり、アクティブな項目ごとに特別な画像がある単純なメニューを作成しようとしています。

私は Drupal を使用しているため、HTML 出力を変更することはできません (とにかく簡単ではありません)。私の質問は、以下に示す HTML コードを使用してそれを行うことができるかどうか、およびどのように行うことができるかです。

<div id="quicktabs-2" class="quicktabs_wrapper quicktabs-style-nostyle quicktabs-processed">
<ul class="quicktabs_tabs quicktabs-style-nostyle">
<li class="qtab-0 active first"><a href="/bagsmaekken?quicktabs_2=0#quicktabs-2" id="quicktabs-tab-2-0" class="qt_tab active">Question</a></li>
<li class="qtab-1"><a href="/bagsmaekken?quicktabs_2=1#quicktabs-2" id="quicktabs-tab-2-1" class="qt_tab active">Lead</a></li>
<li class="qtab-2"><a href="/bagsmaekken?quicktabs_2=2#quicktabs-2" id="quicktabs-tab-2-2" class="qt_tab active">Board</a></li>
<li class="qtab-3 last"><a href="/bagsmaekken?quicktabs_2=3#quicktabs-2" id="quicktabs-tab-2-3" class="qt_tab active">Ready</a></li>
</ul>
</div>

最終的な希望の結果に近いものをいくつか作成しましたが、テキストをインデントする例でまだ問題が発生しているため、表示されません。これまでの私のCSSは次のとおりです。

ul.quicktabs_tabs li {display:inline; }

#quicktabs-2 li.active a {
  background-image:url(question-active.png);
background-position:5px 0px;
  background-repeat:no-repeat no-repeat;
  padding-bottom:18px;
  padding-left:135px;
  padding-right:5px;
}

#quicktabs-2 li.qtab-1 a {
  background-image:url(lead-grey.png);
background-position:5px 0px;
  background-repeat:no-repeat no-repeat;
  padding-bottom:18px;
  padding-left:29px;
  padding-right:50px;
}
#quicktabs-2 li.qtab-2 a {
  background-image:url(board.png);
  background-position:5px 0px;
  background-repeat:no-repeat no-repeat;
  padding-bottom:18px;
  padding-left:29px;
  padding-right:50px;   
}
#quicktabs-2 li.qtab-3 a {
  background-image:url(ready-grey.png);
  background-position:5px 0px;
  background-repeat:no-repeat no-repeat;
  padding-bottom:18px;
  padding-left:29px;
  padding-right:50px;
}

これはこれまでの私のコードであり、画像を適切な間隔で正しく表示しますが、a-href 内のテキストを非表示にすることはできません。私はそれが正しいスタイルクラス/ IDを打つことの問題であることはかなり確信していますが、私は多くの異なる組み合わせを試しましたが、うまくいきません.

どんな助けでも大歓迎です。ありがとうございました

誠実
- メスティカ

4

2 に答える 2

1

アンカー タグ内でテキストを非表示にする場合は、{text-indent:-9999px}これを追加するだけでテキストが移動しますが、テキスト-9999pxは非表示になります。この方法は IR - 画像置換と呼ばれます

編集：これは@Faustが提供する参照です

于 2011-05-15T14:11:32.217 に答える
0

あなたの主な関心事は、リンク内のテキストを置き換えることだと思われます (いいえ?)。

リンク テキストを変更する権限があり、HTML 文字エンコードされない値を含むマークアップを含めることが許可されている場合は、

次に、各リンク テキストをスパン (例: Question--> <span>Question</span>) で囲み、各行が次のようになるようにします。

<li class="qtab-0 active first"><a href="/bagsmaekken?quicktabs_2=0#quicktabs-2" id="quicktabs-tab-2-0" class="qt_tab active"><span>Question<span></a></li>

...次に、この CSS を使用してテキストを非表示にできます。

#quicktabs-2  a span {display:none;}

それ以外の場合、他の唯一の手段は、テキストを非常に小さくして画像の色に近づけることだと思います。

#quicktabs-2  a {font-size:1px;text-decoration:none;color:grey}
于 2011-05-15T10:54:32.273 に答える