1

CSSで2つのことを変えるボタンを作ろうとしています。1 つ目はテキストを表示し、2 つ目はテキストの上の画像を非表示にします。いろいろやってみましたが、どうしてもうまくいきません。どんな助けでも大歓迎です。CSSは

p {
    color:#591865;
    text-align:center;
    opacity:0;

}

p:target {
    color:# a1a100;
    opacity:1;
    -webkit-transition: opacity 1s linear;
}

#image {
    opacity: 1;
    background-image:url(images/01.jpg);
    height: 786px;
    width:1024;
}

#image:target {
    opacity:0;
}

そしてhtmlは

<nav>
            <a href="#one, #image">One</a>
            <a href="#two, #image">Two</a>
            <a href="#three, #image">Three</a>
            <a href="#four, #image">Four</a>
        </nav>
       <div id="image"><img src="images/01.jpg"/></div> 
       <div>
        <p id="one"><img src="graphics/filler.png" width="281" height="128" onClick="javascript:playVideo1();"/></p> 
        <p id="two"><video src="images/01.m4v" poster="images/01.jpg" autoplay controls></video></p>
        <p id="three">Number Three</p>
        <p id="four">Number Four</p> 
   </div>
   </div>

ご意見ありがとうございます

4

5 に答える 5

4

現在書かれているため、これは不可能です。このように2 つの異なる要素に影響を与えるには、JavaScript が必要です。

ただし、HTML を並べ替えることができる場合 (そして、最新のブラウザーからのみサポートする意思がある場合) は、次の HTML を使用して実装できます。

<nav>
<a href="#one">One</a>
<a href="#two">Two</a>
<a href="#three">Three</a>
<a href="#four">Four</a>
</nav>
<div>
    <p id="one">
        <img src="graphics/filler.png" width="281" height="128" onclick="javascript:playVideo1();"/>
    </p>
    <p id="two">
        <video src="images/01.m4v" poster="images/01.jpg" autoplay controls></video>
    </p>
    <p id="three">
        Number Three
    </p>
    <p id="four">
        Number Four
    </p>
    <div id="image">
        <img src="images/01.jpg"/>
    </div>
</div>​

追加の CSS セレクター:

p:target ~ #image {
    opacity:0;
}​

JS フィドルのデモ。

JavaScript がオプションの場合、次のように動作します。

var links = document.querySelectorAll('nav > a'),
    image = document.getElementById('image');

for (var i=0,len=links.length; i<len; i++){
    links[i].onclick = function(e){
        image.style.opacity = '0';
    };
}​

JS フィドルのデモ。

参考文献:

  1. CSS:

  2. JavaScript:

于 2012-04-27T20:44:39.270 に答える
0

私は同様のことを達成しようとしていました。つまり、cssを使用して、アンカーを使用してアイテムを表示/非表示にし、ターゲットセレクターを...

この質問に固有の例を作成する時間はありませんが、理解できると確信しています... ;)

これがフィドルです...

(http://jsfiddle.net/pB72f/)
于 2013-12-20T12:19:22.493 に答える
0

1 つの href で 2 つの id を作成することはできません。これは、# href によってブラウザがリンク先のオブジェクトにフォーカスするためです。そのため、2 つのオブジェクトをポイントすると、ブラウザは両方にフォーカスできなくなります...

たとえば、入力テキストに 2 つの href を配置すると、両方がフォーカスされると想像してみてください。入力すると、両方に同じように入力されますか？

あなたはJavaScriptを使用することができます：

<a href="#" onclick="toggleVisible('one', 'image')">One</a>
<script type="text/javascript">
    function toggleVisible( textId, imageId ) {
        $( "#" + textId ).show().
        $( "#" + imageId ).hide();
    }
</script>

もちろん、jquery を含める必要があります。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

于 2012-04-27T20:45:24.097 に答える
0

このようなもの？(ここでは jQuery を使用していますが、同じ考え方を通常の JavaScript に簡単に適用できます)

<a href="#" onclick="toggleVisible('one', 'image')">One</a>
<script type="text/javascript">
    function toggleVisible( textId, imageId ) {
        $( "#" + textId ).show(); //It should be semicolon
        $( "#" + imageId ).hide();
    }
</script>
于 2012-04-27T20:39:13.833 に答える