[英]Hide clickable links inside div when opacity is 0
I have the HTML
structure as follows:我的
HTML
结构如下:
<div class="boxes workshops wrapl">
<a href="#" id="showw1" class="workshops-button lfloat">Show it</a>
</div>
<div class="boxes exhibitions">
<a href="#" id="showex1" class="exhibitions-button lfloat">Show it</a>
</div>
<div class="boxes gallery">
<a href="#" id="showex1" class="gallery-button lfloat">Show it</a>
</div>
The class .boxes
are squares set next to one another. .boxes
类是.boxes
设置的方块。 There are about 30
boxes.大约有
30
盒。 Initially all the boxes are set to opacity:1
and all the -button
class are set at opacity:0
.最初,所有框都设置为
opacity:1
,所有-button
类都设置为opacity:0
。
However, then also if I hover my mouse inside the .boxes
, the links are clickable.但是,如果我将鼠标悬停在
.boxes
,链接也是可点击的。
My .navi
menu:我的
.navi
菜单:
<div id="navi">
<a href="#"><div id="t0"><span>Home</span></div></a>
<a href="#"><span>Events</span></a>
<a href="#"><span>Gallery</span></a>
<a href="#"><span>Exhibitions</span></a>
</div>
My javascript
code for changing the opacity
.我用于更改
opacity
javascript
代码。
<script type="text/javascript">
var isHome = true;
$(function () {
$("#navi a").click(function() {
c = $(this).text().toLowerCase();
isHome = c=="home";
if (isHome){
$('.events-button, .workshops-button, .gallery-button, .sponsors-button, .hospitality-button, .lectures-button, .exhibitions-button').animate({opacity:0.0},500);
$(".boxes").animate({opacity: 1.0}, 500 );
} else {
$('.' + c).animate({opacity: 1.0}, 500 );
$('.' + c + "-button").animate({opacity: 1.0}, 500 ).addClass('activehack');
$('.activehack').not('.' + c + "-button").animate({opacity: 0.0}, 500 );
$('.boxes').not('.' + c).animate({opacity: 0.3}, 500 );
}
});
});
</script>
How can I remove the click
event of the -button
elements when they are not visible?当
-button
元素不可见时,如何删除它们的click
事件?
EDIT #1 I don't have to click the .-button
elements.编辑 #1我不必单击
.-button
元素。
When I click home
, all .boxes
should appear, but the <a>..</a>
elements in each .boxes
must not be clickable.当我单击
home
,所有.boxes
都应该出现,但每个.boxes
的<a>..</a>
元素不能点击。 Then if I click .events
, only the .boxes
with class: .events
should appear alongwith <a>...</a>
elements having .events-button
class[and they should be clickable now.]然后,如果我点击
.events
,只有.boxes
用类: .events
应该出现非常久远<a>...</a>
有元素.events-button
类[和他们现在应该可以点击]
$('a[class="button"]').click(function(e){ // <--- don't miss this e
if ($(this).css('opacity')==0) e.preventDefault();
});
I know you already accepted an answer, but the thing is simply blocking the click event doesn't stop the default behavior - the "hand" icon when you hover over the anchor, indicating something clickable.我知道您已经接受了一个答案,但问题只是阻止点击事件并不会停止默认行为 - 当您将鼠标悬停在锚点上时的“手”图标,表示可点击的内容。 Really, you should be showing/hiding the anchors, not overriding what happens when they are clicked since they shouldn't be clickable in the first place .
真的,你应该显示/隐藏锚点,而不是覆盖点击它们时发生的事情,因为它们首先不应该被点击。
Here is a jsfiddle that actually shows/hides the links, making them unclickable as a "side effect" but also the expected behavior for a user.这是一个实际显示/隐藏链接的jsfiddle ,使它们无法点击作为“副作用”,但也是用户的预期行为。
$(".boxes a").hide();
is added when the home link is clicked, hiding all anchor tags within the divs.单击主页链接时添加,隐藏 div 中的所有锚标记。
This is also used when any other nav item is clicked, then $('.' + c + ' a').show();
当单击任何其他导航项目,然后
$('.' + c + ' a').show();
is used to show the relevant links.用于显示相关链接。
取消绑定不必要的处理程序使用.unbind()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.