ボックスごとリンク化する

Ads

Result

jQuery

$(document).ready(function() {
    //class="box"をクリックでイベント発火
    $('.box').click(function() {
        //a要素からhref属性を探して中身を取得し、そのURLに飛ばす。別窓なら('href'), '_blank'とすればOK
        window.location = $(this).find('a').attr('href');
        return false;
    });
});

HTML5ならボックス要素にリンク貼れますのでこのコードは不要ですね。

css

.box{
    background: #eee ;
    padding: 50px ;
    margin:50px;
    height: 200px ;
    width: 200px ;
    cursor: pointer;
}
.box:hover{background: #ddd ;}

html

<div class="box">
      <a href="/">kachibito.net</a>
</div>

via

Make Entire Div Clickable | CSS-Tricks


Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7