divをクリック可能にする

Question

ここで素晴らしい仕事をありがとう。私は各divをクリックすると別のドキュメントにリンクされるようにdivs（私のコードでは黄色のブロック）のクリック可能なアイテムを作ろうとしています。ここで

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

.homepage-wrapper{ 
 
    max-width: 1043px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.homepage-top-category-container-title{ 
 
    background-color: black; 
 
    margin-bottom: 10px; 
 
    padding: 15px 0 15px 0; 
 
} 
 
#homepage-top-category-container-title{ 
 
    color: orange; 
 
    margin-left: 15px; 
 
} 
 
.homepage-top-category-container-list{ 
 
    display: flex; 
 
    flex-wrap:wrap; 
 
    width: auto; 
 
    height: auto; 
 
} 
 
.homepage-top-category-container-list > div { 
 
    margin-left: 15px; 
 
    margin-bottom: 15px; 
 
} 
 
.homepage-top-category-container-item{ 
 
    display: block; 
 
    float: none; 
 
    width: auto; 
 
    height:auto; 
 
    border: solid 1px black; 
 
    position: relative; 
 
    border-radius: 3px; 
 
    background-color: yellow; 
 
} 
 
#homepage-top-category-container-item-a{ 
 
    width: 240px; 
 
    height: 360px; 
 
} 
 
#homepage-top-category-container-item-b{ 
 
    width: 240px; 
 
    height: 360px; 
 
} 
 
#homepage-top-category-container-item-c{ 
 
    width: 240px; 
 
    height: 360px; 
 
} 
 
#homepage-top-category-container-item-d{ 
 
    width: 240px; 
 
    height: 360px; 
 
} 
 
.homepage-top-category-container-item-btn{ 
 
    position:absolute; 
 
    padding: 5px; 
 
    left: 0; 
 
    right: 0; 
 
    bottom:0; 
 
    background-color: red; 
 
}

<div class="homepage-wrapper"> 
 
    <div class="homepage-top-category-container"> 
 
     <div class="homepage-top-category-container-title"> 
 
      <span id="homepage-top-category-container-title">Most popular aisles</span> 
 
     </div> 
 
     <div class="homepage-top-category-container-list"> 
 
      <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a"> 
 
       block A 
 
       <div class="homepage-top-category-container-item-btn"> 
 
        button 
 
       </div> 
 
      </div> 
 
      <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b"> 
 
       block B 
 
       <div class="homepage-top-category-container-item-btn"> 
 
        button 
 
       </div> 
 
      </div> 
 
      <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c"> 
 
       block C 
 
       <div class="homepage-top-category-container-item-btn"> 
 
        button 
 
       </div> 
 
      </div> 
 
      <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d"> 
 
       block D 
 
       <div class="homepage-top-category-container-item-btn"> 
 
        button 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

私は私がこの問題を解決するために私たちのコミュニティからの任意の助けをいただければ幸いです。あなたはこのような何かをするためにjqueryのを使用することができますのdivクリッカブルを作成しようとしている場合

<a href="http://www.google.com"> 
 
    <div> 
 
    google 
 
    </div> 
 
</a>

Answer 1

あなたはこのような何かを行うことができます.myDivはあなたのdivに置き換えられますが、ドットはそのままにして、hrefをあなたのリンクに変更してください。

<a href="https://www.google.com"> 
 
    <div class="test"> 
 
     Test 
 
    </div> 
 
</a>

Answer 2

：

$(".myDiv").click(function() { 
    window.location = $(this).find("a").attr("href"); 
    return false; 
}); 

Answer 3

解決方法1：onclick JSはこのコードを使用せずにこれを行うには

。
これはonclickプロパティを使用して達成できます。コンセプトの証明：

function rotate(){ 
 
    var Div = document.querySelector('div'); 
 
    Div.style.transform = "rotateX(180deg)" 
 
    setTimeout(function(){ 
 
    Div.style.transform = "rotateX(0deg)" 
 
    }, 300); 
 
}

div { 
 
    padding: 2rem; 
 
    margin: 2rem; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    border: 2px solid #ccc; 
 
    transition: transform .3s cubic-bezier(.4,0,.2,1); 
 
}

<div onclick="javascript:rotate()">Click meh!</div>

さらに、あなたはそれがクリッカブル事だユーザーに信号を送るために、それにcursor:pointerを適用する必要があると思います。

解決策2：私は、リンクが実際にリンク（アンカータグでそれを包む）ようにすることですようにそれを動作させるための最良の方法（クロスブラウザを）信じてアンカーに

を包みます。リンクのように振る舞うが、何もしたくない場合は、hrefの値をjavascript:void(0)とする必要があります。ここ
は

• が
• 、アドレスバーの内容は変更されません死んだリンクは、どこにも移動しません、
• が
• ページをスクロールアップしませんが、clickイベントを発生しますです

<a href="javascript:void(0)"> 
 
     <div>I am a div you can click and nothing happens.</div> 
 
    </a>

01：あなたが聞いています