Запретить переход по якорной ссылке
Здравствуйте.
Дали верстку, сказали посадить на modx - посадил. Нашел вот такой вот нехороший элемент. На главной странице: http://cleaning-servise.ru/#tag_tabs_1 Табы организованы через ссылки, в которых якорь, он же id контейнера с контентом, по второму клику на переключатель срабатывает как якорная ссылка. Я попробовал через preventdefault <a href="#tag_tabs_1" title="OUR CUSTOMERS" class="features-team ui-tabs-anchor" onclick="stopAnchor(event);" role="presentation" tabindex="-1" id="ui-id-1">OUR CUSTOMERS</a>
function stopAnchor(eve){
eve.preventDefault();
};
И ruturn false; пробовал... В итоге откапал что висит событие на табе:
function(){
if($(this).attr("href").substr(0,4)!="http")
$.bbq.pushState($(this).attr("href"));
else
window.location.href = $(this).attr("href");
}
А это то как прописано в скриптах main.js
$(".tabs .ui-tabs-nav a").on("click", function(){
if($(this).attr("href").substr(0,4)!="http")
$.bbq.pushState($(this).attr("href"));
else
window.location.href = $(this).attr("href");
});
http://cleaning-servise.ru/files/theme/js/main.js И я так понимаю, исполняться оно должно ПОСЛЕ моей добавки. Не на столько хорошо, я пока разбираюсь... Вообщем как быть? Что делать и что крайний кусок кода должен делать? |
Вообщем, я не стал тревожить лихо, потому что не знаю, где этот скрипт может быть еще полезен, поэтому просто оформил заглушку и дописал переключатель.
$(".tabs .ui-tabs-nav a").on("click", function(){
if ($(this).hasClass('ui-tabs-anchor')){
console.log('Next Step');
}
else{
if($(this).attr("href").substr(0,4)!="http")
$.bbq.pushState($(this).attr("href"));
else
window.location.href = $(this).attr("href");
}
});
$('a.ui-tabs-anchor').on('click', function(){
$('.tabs .ui-tabs-panel').hide();
$(this).attr('href').show();
$('a.ui-tabs-anchor').parent().removeClass('ui-tabs-active ui-state-active');
$(this).parent().addClass('ui-tabs-active ui-state-active');
});
|
Я не думаю, чтобы организовать табы, вам нужно написать так много JS! Посмотрите, может готовое решение уже есть на markapp.io, где собраны некоторые решения не требующие написания никакого JS-кода!
Я также заметил, что у вас используются многочисленные классы вида padding-top-89, вы можете писать инлайн-стили в таком случае, style="padding-top: 89px;", оно хотя бы более гибкое и отражающее реальное положение вещей! В HTML рекомендуется использовать значения атрибута class, которые описывают сущность содержимого, а не те значения, которые описывают желаемое представление содержимого. w3.org/TR/html52/dom.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="https://daniel-hug.github.io/tabbed-panels/panels.js"></script>
<style>
@font-face {
font-family: "features";
src: url(https://cors-anywhere.herokuapp.com/http://cleaning-servise.ru/files/theme/fonts/features/fonts/features.ttf);
}
section {
font: 1em "Helvetica Neue", "Segoe UI", Ubuntu, sans-serif;
background: #363b40;
background:
linear-gradient(rgba(54, 59, 64, 0.4), rgba(54, 59, 64, 0.4)),
url(http://cleaning-servise.ru/files/uploaded/cleaning.jpg)
center / cover
#363b40
;
padding: 1em;
color: white;
text-align: center;
}
section > button {
font: inherit;
color: inherit;
text-shadow: inherit;
background: transparent;
border: 0;
text-transform: uppercase;
}
section > button::before {
font-family: features;
font-size: 300%;
padding: .25em;
text-transform: none;
content: attr(data-icon);
display: block;
}
section > button:focus {
outline: 0;
opacity: 1;
color: gold;
text-shadow: 0 0 1em;
}
section > h2::after {
content: "";
display: block;
background: white;
width: 6.25em;
height: 0.1em;
margin: 1em auto 0;
}
section > .panel:not(.active) {
display: none;
}
section > .tab:not(.active) {
opacity: .75;
}
section > p {
max-width: 40em;
margin: 2em auto;
}
</style>
<section class="tabbed-panels">
<h2>Nothing is more important</h2>
<!-- Tabs -->
<button class="tab active" data-icon="f">Our Customers</button>
<button class="tab" data-icon="`">The Environment</button>
<button class="tab" data-icon="t">Our mission</button>
<!-- Panels -->
<p class="panel active">
Our cleaning service is affordable and our cleaning experts
are highly trained. If for any reason you aren't happy with
our professional cleaning service, contact Cleanmate. We will
come back and clean the specific areas that didn't meet your
expectations. Nothing is more important to us than your satisfaction.
</p>
<p class="panel">
There are highly trained experts in our affordable cleaning service.
Unless a reason exists you are happy with our professional cleaning
service, contact Cleanmate. We will come back and clean the
specific areas that didn't meet your expectations. Nothing is more
important to us than your satisfaction.
</p>
<p class="panel">
There are highly trained experts in our affordable cleaning service.
If only a reason exists you are unhappy with our professional cleaning
service, contact Cleanmate. We will come back and clean the
specific areas that didn't meet your expectations. Your satisfaction
is important to us.
</p>
</section>
</body>
</html>
P. S. The plural form 'services' is used mainly to refer to a variety or range of services. If it is plural then presumably there is more than one service. In fact, when a single or predominant service is provided, the singular form 'service' is often used instead of 'services' as in laundry service, answering service and courier service. P. P. S. Your domain name is misspelled. OMG😱 |
Malleys, я осознаю весь ужас того что творится наэтом сайте, но поверьте мне на слово!
ЭТО НЕ Я! Я вообще до такого состояния докатился только из-за того что где-то с какого-то сайта скачали верстку, потому что она понравилась клиенту, и клиент этот самый был стеснен средствами, что мог потратить. И в итоге родилось вот это. P.S.: it's not my problem))) Jedem das Seine 0/ |
Malleys, а вообще, я хотел бы все таки получить разъяснения по сути вопроса, а не предложения об организации табов не смотря на объективность этих самых предложений и кривость моих реализаций.
Если конечно, вас не затруднит мне объяснить, зачем кому-то изначально понадобилось все это городить? |
Цитата:
Цитата:
|
Цитата:
Отсюда и мои трудности. В итоге я решил то собственно эту задачу чуть чуть переписав и дописав, тут уже другой принцип "И так сойдет". :dance: Каюсь, осознаю, что возможно где-то порой не прав с этим подходом. Но мне как-то сейчас пофигу) :thanks: А все таки, зачем тот кто верстал собственно так изгалялся? :help: |
| Часовой пояс GMT +3, время: 11:42. |