1

次のコードがあります。

<style>
.temp {
    transition:all 1s ease;
    opacity: 0;
    /* Don't forget the vendor specific pre-fixes! */
}

/* .temp:first-child{opacity: 1;} */

.temp:target {
    opacity: 1;
    font-size:40px;
}

#one:target {
  opacity: 1 ;
   font-size:40px
}
/*.tab:target ~ #one { opacity: 1;} */
</style>
<body>

<a href="#one">One</a>
<a href="#two">Two</a>
<a href="#three">Three</a>
<a href="#four">Four</a>

<div class="buttons">
    <div class="temp" id="one"> Number One</div>  
    <div class="temp" id="two">Number Two</div>  
    <div class="temp" id="three">Number Three</div>  
    <div class="temp" id="four">Number Four</div>
</div>

タスクは、css プロパティ {opacity:1;} を使用して div #one の「デフォルト」状態をページの読み込み時に CSS のみで設定することです。

このトピックも見つけました。 デフォルト : CSS でターゲット

また、このコードは非常にうまく機能します。

window.onload = function(){
    if(document.location.hash="#"){
        document.location.hash="#one";
    }
}

ただし、複数の :target がある場合、:target 状態の両方の div で機能するかどうかはわかりません。

出来ますか？注意と回答ありがとうございます。

4

0 に答える 0