0

私のHTMLコードは次のとおりです。

 <div id="arrow">
     <b>Filter By: </b>

    <a href="__#" onclick="GetAllTasks();" id="id_all" style="color: #88b807;">All</a> 

    <input type="text" size="3" style="display: none;" id="DateFilter" />

    <a href="__#" onclick="GetByDate(this);" style="vertical-align: middle;"   id="cal_icon">EndDate</a>

    <a href="#"__0  onclick="GetMyTasks();" id="id_myposts">My Requests</a>
    </div>

私のcssコードは次のとおりです。

a:active  {font-family: Verdana, Sans-serif;
            color:#FF0000;
            text-decoration:none;

            background: url("Images/arrow_down.png") no-repeat;
            background-position:center;
            }

ここでは、矢印画像をアクティブリンクの下に配置して、アクティブであることを示します。上記のコードを試しましたが、目的の出力が得られません。

4

3 に答える 3

1

純粋なCSSで矢印を表示できますが（以下を参照）、クラスを「存続」させるにはjavascriptが必要です。

デモ（リンクをクリック）

HTML：

<b>Filter By: </b>
<a href="#">All</a> 
<a href="#">EndDate</a>
<a href="#">My Requests</a>

CSS：

a  {
    position:relative;
}
a:active:after, a.active:after  {
    background: url("Images/arrow_down.png");
    width:10px; /* arrow's width */
    height:10px; /* arrow's height */
    margin-left:-5px; /* half of arrow's width */
    position:absolute;
    top:100%;
    right:50%;
    content:" ";
}

jQuery：

$('a').on('click',function(){
    $('a').removeClass('active');
    $(this).addClass('active');
});​
于 2012-10-04T10:10:35.873 に答える
0

これを行うには、スクリプトを使用する必要がある場合があります。アクティブ状態用に別のクラスを作成し、クリック時にそのクラスを追加します。

$('a').click(function(){
    $(this).addClass("active");
});​

これがデモですhttp://jsfiddle.net/qvQxp/1/

于 2012-10-04T10:05:30.847 に答える
0

ジョナの答えを試してみたところ、マージン左の負のマージンがブラウザによって無視されていて、矢印が矢印画像の幅の半分だけ中心からずれていることがわかりました。これを修正するには、代わりに負のマージンをmargin-rightに適用します。

于 2015-03-18T01:49:36.263 に答える