html - 如何使用 div 突出显示具有背景颜色的当前事件链接

Question

我尝试使用 div 制作菜单 JSFiddle here

这是我的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>

有没有办法让当前打开的链接的背景为不透明的黑色？就像当我在“主页”页面上时，页脚中的主页将具有不透明的黑色背景，等等。

我正在 Wordpress 网站上使用它。

为我乱七八糟的代码道歉。这是我让它看起来像我喜欢的样子的唯一方法。

Answer 1

这是执行此操作的简单 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;   
}