-1

いくつかのリンクがあり、それぞれに固有の href があります。

リンク 1 に href="#first" があるとしましょう。リンク 2 には href="#second" があります。それでは、div で何かを行うための CSS は何でしょうか? (IDボックス付)

私は次のような多くのことを試しました：

#first:target #box{
    something..
}
#second:target #box{
    something else..
}

#linkOne:hover #box{ width:200px; }

これは、#linkOne をホバリングすることで #box のサイズを変更します。リンクをクリックして #box のサイズを変更するように、:target で同じことを行いたい

4

3 に答える 3

1

私が間違っていなければ、あなたは以下のようなものを探しています。これheightにより、現在ターゲットになっている要素の が 20px に設定されます。トランジション効果も適用されます。

HTML:

<a href='#first'>First</a>
<a href='#second'>Second</a>

<div id='first'>This is first div</div>
<div id='second'>This is second div</div>

CSS:

#first, #second {
    height: 0px;
    overflow: hidden;
    transition: height 1s ease-in;
}
#first:target {
    height: 20px;
}
#second:target {
    height: 20px;
}

デモフィドル

編集: jQuery/JavaScript にタグを付けておらず、CSS ソリューションを探していたことは知っています。ただし、そのようなリンクが多数あり、JS ベースのソリューションを使用しても問題ない場合は、以下を試すことができます。

idこのスクリプトには、クリックheightされたリンクの と、リンクがクリックされたときにボックスが持つはずの との間のマッピングがあります。それに基づいて、#box要素の高さが変更されます。このfiddleに見られるように、トランジションも機能します。

window.onload = function () {
    document.getElementsByTagName('body')[0].onclick = function(e){
        var box = document.getElementById('box');
        var heights = { first: '20px', second: '40px', third: '30px' };
        if(e.target.id)
            box.style.height = heights[e.target.id];
    };
}
于 2013-09-24T14:17:31.277 に答える
0

DOMを操作したい場合は、 javascriptを使用する必要があると思います。CSS はページのスタイルを設定するためのものであり、要素を操作するためのものではないことを覚えておく必要があります。

于 2013-09-24T14:09:14.557 に答える