Убрать наследование return false от родительского элемента
Существуют некие выезжающие табы-вкладки. По клику на язычок (div состоит из img языка и того div, в котором всё лежит) вкладки происходит нечто такое:
$opener1.click(function() {
$($Link2).animate({"left": "970px"}, "slow").removeClass('expanded');
$($Link3).animate({"top": "591px"}, "slow").removeClass('expanded');
$($Link4).animate({"left": "-970px"}, "slow").removeClass('expanded');
if($Link1.css('top')==0) {
//alert('0 point');
} else {
$Link1.animate({"top": "0px"}, "slow").addClass('expanded');
}
return false;
});
Если щелкнуть не по языку, то все закрывается:
$(document).not($Link1).click (function() {
closeAll = setTimeout(function() {
$Link1.animate({top: '-591'}, "slow");
}, 1000);
}).mouseenter(function() {
clearTimeout(closeAll);
});
Для того, чтобы при клике внутри самой вкладки, вкладка никудашеньки не девалась, было дописано следующее:
$Link1.click(function() {
return false;
});
ТЕПЕРЬ, если кликнуть, к примеру, на какую-нибудь ссылочку, к примеру, внутри этой вкладки, но не произойдёт ничего, что законно, ибо return false ссылка наследует со своего родительского элемента, или вообще ничего не наследует, но поскольку блокированный родитель круче, то ссылка и не думает работать. А надо бы...А это сделать, подскажите, пожалуйста! P.S. Если кто-то подскажет, как ещё это элегантнее написать, не на каждую отдельную вкладку одну и ту же функцию (этот код повторяется 4 разу на все 4 вкладки), а на все сразу, то скажу двойное спасибо. |
Цитата:
Или Приведите Образцы HTML кода для кликабельной вкладки , без перехода и реальной ссылки с нужностью перехода - но живая страница - лучше! |
возможно догадываюсь, о чём речь, хотя и приходится включать телепатические способности.
Стоит для закрытия делать подложку, по клику на которую всё ненужное закрывается, а всё остальное пусть работает как хочет |
LittlePony,
Просто нун сделать not(Тут отличия)
$Link1.not(Тут отличия).click(function() {
return false;
});
|
иногда это бывает слишком нагромождённо.
А вообще действительно надо смотреть задачу и только тогда принимать решение. |
Огромное спасибо за ответ, но именно
$Link1.not(Тут отличия).click(function() {
return false;
});
уже задействован. Если щелкнуть по чему угодно, кроме вкладки, то вот как раз она и закрывается. Если щелкнуть по самой вкладке, то для того, чтобы она также как и всё остальное не закрывалась, на неё и навешен return false...Конечно, можно ещё добавить что-то вроде
$Link1.not('a').click(function() {
return false;
});
Но это мы не полностью раскроем контент вкладки, а лишь конкретно ссылки. А ведь, например, ссылка может быть и на онклике по изображению, верно? Вот необходимая схема. К сожалению, на сервере нигде нет.
<div id="wrapper">
<div class="tab main">
лого
</div>
<div id="service" class="tab slide" style="top: 0px; left:-970x;">
<img id="clickarea1" class="yazik" src="images/service645ts.png" alt="service" style="float:right; margin-top: 322.5px; margin-bottom:82px;"/>
<div>
<a class="closeback l" onclick="$('#service').animate({'left': '-970px'}, 'slow').removeClass('expanded');"></a>
что-то тут
</div>
</div>
<div id="icons" class="tab slide" style="top:-591px; left: 0px;" >
<div>
<a class="closeback t" onclick="$('#icons').animate({'top': '-591px'}, 'slow').removeClass('expanded');"></a>
<p>Officianime consece perspit, same et et <a href="http://www.yandex.ru">vendendis</a> num voloremquas consequis dolorer natiosa ndendio nsequae eos dic tem acianto qui quis ullabor epudit voluptus, nusa dollace ruptur, venduci psanimus evelique.</p>
</div>
<img id="clickarea2" class="yazik" src="images/icons1024ts.png" alt="icons" style="margin-left: 272px; margin-right: 512px;"/>
</div>
<div id="how" class="tab slide" style="top: 0px; left: 970px;">
<img id="clickarea3" class="yazik" src="images/how645ts.png" alt="how" style="float:left; margin-top: 83px; margin-bottom: 322px;"/>
<div>
<a class="closeback r" onclick="$('#how').animate({'left': '970px'}, 'slow').removeClass('expanded');"></a>
<p>Tios et, qui occaborro quis esto omnisti denis dolupti oreperum a parunt.
Quas eati aut poria cupta sitate quibus molorerum quo moluptasi tene nonse qui volestrunt arum exero dolupta tectinu llabore iciaspe rcienis in eos voluptia doluptat aut quodita corepta temporiores adiciundi di officid molupta eat apitend isquissum rest, veni officimagnis sitias volores ecest, sanis cust faccus que volor anda et ressequ isquidu ciliquamus explis atia coria conem rereprat.</p>
</div>
</div>
<div id="about" class="tab slide" style="top: 591px; left:0px;">
<img id="clickarea4" class="yazik" src="images/about1024ts.png" alt="about" style="margin-left: 512px; margin-right: 272px;"/>
<div>
<p>Harum ene nectasp eritenem dit minusam quibusam se nonsequ aerio. Bitation parcipsae nam, idebisint dolupta volum fuga. Nem facit harumque voluptati acearis quisit, qui dolore ius videles delloribus voluptas eaquas ipsaeptat incius.
Fugiassit, volut latur? Uciis conseque es dolest faccum faccust, ut prem simus as volorem porpore de consent quas sed maio cullabo rporerf erroriam, sum que rem eumque pedipis.</p>
<a class="closeback b" onclick="$('#about').animate({'top': '591px'}, 'slow').removeClass('expanded');"></a>
</div>
</div>
</div>
|
Для полноты картины:
$(document).ready(function() {
var closeAll,
$Link1 = $('#icons'),
$Link2 = $('#how'),
$Link3 = $('#about'),
$Link4 = $('#service'),
$opener1 = $('#clickarea2'),
$opener2 = $('#clickarea3'),
$opener3 = $('#clickarea4'),
$opener4 = $('#clickarea1');
$($Link1).animate({"top": "-591px"}, 0);
$($Link2).animate({"left": "970px"}, 0);
$($Link3).animate({"top": "591px"}, 0);
$($Link4).animate({"left": "-970px"}, 0);
$opener1.click(function() {
$($Link2).animate({"left": "970px"}, "slow").removeClass('expanded');
$($Link3).animate({"top": "591px"}, "slow").removeClass('expanded');
$($Link4).animate({"left": "-970px"}, "slow").removeClass('expanded');
if($Link1.css('top')==0) {
//alert('0 point');
} else {
$Link1.animate({"top": "0px"}, "slow").addClass('expanded');
}
return false;
});
$opener2.click(function() {
$($Link1).animate({"top": "-591px"}, "slow").removeClass('expanded');
$($Link3).animate({"top": "591px"}, "slow").removeClass('expanded');
$($Link4).animate({"left": "-970px"}, "slow").removeClass('expanded');
if($Link2.css('left')==0) {
//alert('0 point');
} else {
$Link2.animate({"left": "0px"}, "slow").addClass('expanded');
}
return false;
});
$opener3.click(function() {
$($Link1).animate({"top": "-591px"}, "slow").removeClass('expanded');
$($Link2).animate({"left": "970px"}, "slow").removeClass('expanded');
$($Link4).animate({"left": "-970px"}, "slow").removeClass('expanded');
if($Link3.css('top')==0) {
//alert('0 point');
} else {
$Link3.animate({"top": "0px"}, "slow").addClass('expanded');
}
return false;
});
$opener4.click(function() {
$($Link1).animate({"top": "-591px"}, "slow").removeClass('expanded');
$($Link2).animate({"left": "970px"}, "slow").removeClass('expanded');
$($Link3).animate({"top": "591px"}, "slow").removeClass('expanded');
if($Link4.css('left')==0) {
//alert('0 point');
} else {
$Link4.animate({"left": "0px"}, "slow").addClass('expanded');
}
return false;
});
//
$Link1.click(function() {
return false;
});
$Link2.click(function() {
return false;
});
$Link3.click(function() {
return false;
});
$Link4.click(function() {
return false;
});
//Next
$(document).not($Link1).click (function() {
closeAll = setTimeout(function() {
$Link1.animate({top: '-591'}, "slow");
}, 1000);
}).mouseenter(function() {
clearTimeout(closeAll);
});
$(document).not($Link2).click (function() {
closeAll = setTimeout(function() {
$Link2.animate({left: '970'}, "slow");
}, 1000);
}).mouseenter(function() {
clearTimeout(closeAll);
});
$(document).not($Link3).click (function() {
closeAll = setTimeout(function() {
$Link3.animate({top: '591'}, "slow");
}, 1000);
}).mouseenter(function() {
clearTimeout(closeAll);
});
$(document).not($Link4).click (function() {
closeAll = setTimeout(function() {
$Link4.animate({left: '-970'}, "slow");
}, 1000);
}).mouseenter(function() {
clearTimeout(closeAll);
});
});
Планировала каждую из этих $($Link1).animate({"top": "-591px"}, 0); $($Link2).animate({"left": "970px"}, 0); $($Link3).animate({"top": "591px"}, 0); $($Link4).animate({"left": "-970px"}, 0); запихнуть просто в нечто вроде function x(){ $($Link1).animate({"top": "-591px"}, 0); }; и далее вместо бесконечных повторов вставлять x(); но что-то выдаёт мне undefined при встрече с x(); |
Цитата:
Может Воспользовацо UI tabs ? http://jquery.page2page.ru/index.php5/Вкладки_UI |
| Часовой пояс GMT +3, время: 07:23. |