3

HTML と CSS の練習用に、MSN.com Web ページのコピーを作成しています。ヘッダーと、検索フォームを除くその上のすべてを取得できました。フォームの作り方はわかったけど、小さな部品の 1 つがどのように機能するかはわかりません。

例えば：

次の写真を見てください: http://gyazo.com/497d24dde39c04d9956c2faec4eb556f

MSN と書かれている場所 (オレンジ色の部分) を見ることができます。矢印/三角形はそのすぐ下にあります。この矢印はイメージだと思いますよね？CSSだけでは作れませんか？

したがって、最初の単語でデフォルトの矢印を使用してから、アクティブなリンク/テキストに再配置する方法を知りたいです。

私にお知らせください。ありがとう

4

1 に答える 1

2

MSN が使用しているような単純な灰色の矢印は、実際には CSS を使用して作成できます。選択したリンクをたどるようにするには、JavaScript を使用する必要があります。心配はいりません。とても簡単です。

まず、jsfiddle の実際の例を次に示します: http://jsfiddle.net/EBhVu/23/

HTML:

<a href="#" class="active">Web</a> 
<a href="#">MSN</a>
<a href="#">Images</a>

CSS:

これにより、小さな灰色の矢印が作成され、選択したリンクの下に配置されます

a  {
    position:relative;
}
a:active:after, a.active:after  {
    position:absolute;
    right:50%; /* Centers arrow */
    top:100%; /* Places arrow below link */
    content:" ";
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; /* Builds the arrow */
    border-right: 5px solid transparent;
    border-bottom: 5px solid grey;
}

JavaScript:

リンクがクリックされるたびに、この JavaScript はクリックされたリンクに「アクティブ」のクラスを与えます。

$('a').on('click',function(){
    $('a').removeClass('active'); 
    $(this).addClass('active'); 
});
于 2013-02-10T22:41:36.237 に答える