[WordPress] 現在のアクティブなリンクの div 要素を使用して背景色で強調表示する方法

スポンサーリンク

質問

JSFiddle ここで 絶対位置の div を使用してメニューを作成しようとした

これは私の css:

#footer {
bottom:0px;
height:70px;
left:0px;
position:absolute;
width:100%!important;
z-index:100;
background-color: rgba(255,255,255,0.5)!important;
}
#footer .menu {
height:54px;
color:#000;
}


.footerFloat {
   display:inline-block;
 width: 25%;
 float: left;
 min-width:200px;

}

.footerh4 {
font-size: 18px;
font-weight: 700;
font-family: 'Open Sans', sans-serif;
text-align: center;
line-height: 20px;

}

.footertoptxt {
 font-size: 14px;
 font-family: 'Lato', sans-serif;
 text-align: center;
 line-height: 14px;
}

.top25 {
margin-top: 20px;
}

.top30 {
margin-top: 30px;
}

a.footer-fill {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}

div.clickable a {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-decoration:none;
z-index:10;
opacity: 0; 
filter: alpha(opacity=1);
}

div.clickable {
position: relative;
height: 70px;
}

div.clickable:hover{
background-color: rgba(0,0,0,0.6);
color: #fff;
}

ここで html:

<div id="footer">
    <div class="menu">
<div class="footerFloat footerfill clickable">
<a href="#"></a>
<div class="footerh4 top30">Home</div>
</div>
<div class="footerFloat footerfill clickable">
<a href="#"></a>
<div class="footertoptxt top25">Lorem Ipsum in</div>
<div class="footerh4">Store Lorem Ipsum</div>
</div>
<div class="footerFloat clickable">
<a href="#"></a>
<div class="footertoptxt top25">Lorem Ipsum in</div>
<div class="footerh4">Corporate Lorem Ipsum</div>
</div>
<div class="footerFloat clickable">
<a href="#"></a>
<div class="footertoptxt top25">Lorem Ipsum</div>
<div class="footerh4">Lorem Ipsum</div>
</div>
</div>
    </div>

不透明な黒の背景を持っている現在開かれているリンクを確認する方法はありますか?ときに私は「ホーム」ページで、フッターに家がある不透明な黒の背景のように。

、ワードプレスのウェブサイトでこれを使用してをしています

謝罪私の厄介なコード。私はそれを好きどのように私はそれを見る唯一の方法です

答え

ここでは、これを行う簡単な jquery コード:

jQuery:

$(document).ready(function() {
    $("#footer a").click(function() {
        $("#footer a").parent().removeClass('active');
        $(this).parent().addClass('active');
    });      
});

CSS:

.active {
 background-color: rgba(0,0,0,0.6);
 color: #fff;   
}

http://stackoverflow.com/questions/29273265/how-to-highlight-current-active-link-with-background-color-using-divs

スポンサーリンク

Leave a Reply