Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Запретить переход по якорной ссылке (https://javascript.ru/forum/dom-window/76567-zapretit-perekhod-po-yakornojj-ssylke.html)

oleg13321 23.01.2019 09:38

Запретить переход по якорной ссылке
 
Здравствуйте.
Дали верстку, сказали посадить на 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
И я так понимаю, исполняться оно должно ПОСЛЕ моей добавки.
Не на столько хорошо, я пока разбираюсь...
Вообщем как быть? Что делать и что крайний кусок кода должен делать?

oleg13321 23.01.2019 10:56

Вообщем, я не стал тревожить лихо, потому что не знаю, где этот скрипт может быть еще полезен, поэтому просто оформил заглушку и дописал переключатель.
$(".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');
	});

Malleys 23.01.2019 21:21

Я не думаю, чтобы организовать табы, вам нужно написать так много 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😱

oleg13321 24.01.2019 14:10

Malleys, я осознаю весь ужас того что творится наэтом сайте, но поверьте мне на слово!

ЭТО НЕ Я!
Я вообще до такого состояния докатился только из-за того что где-то с какого-то сайта скачали верстку, потому что она понравилась клиенту, и клиент этот самый был стеснен средствами, что мог потратить.
И в итоге родилось вот это.


P.S.: it's not my problem))) Jedem das Seine 0/

oleg13321 24.01.2019 14:14

Malleys, а вообще, я хотел бы все таки получить разъяснения по сути вопроса, а не предложения об организации табов не смотря на объективность этих самых предложений и кривость моих реализаций.

Если конечно, вас не затруднит мне объяснить, зачем кому-то изначально понадобилось все это городить?

Malleys 24.01.2019 15:50

Цитата:

Сообщение от oleg13321
ЭТО НЕ Я!

Я горжусь вами! 🙌 Теперь всё это в ваших руках!

Цитата:

Сообщение от oleg13321
я хотел бы все таки получить разъяснения по сути вопроса

У вас там (согласно посту №1) используется ссылка, а вы стараетесь написать скрипт, чтобы она не вела себя как ссылка. Так замените ссылку на кнопку.

oleg13321 25.01.2019 13:32

Цитата:

Сообщение от Malleys (Сообщение 502585)
У вас там (согласно посту №1) используется ссылка, а вы стараетесь написать скрипт, чтобы она не вела себя как ссылка. Так замените ссылку на кнопку.

Таки да, просто исповедую принцип - "Работает? Не трогай".:write:
Отсюда и мои трудности.
В итоге я решил то собственно эту задачу чуть чуть переписав и дописав, тут уже другой принцип "И так сойдет". :dance:

Каюсь, осознаю, что возможно где-то порой не прав с этим подходом.
Но мне как-то сейчас пофигу) :thanks:

А все таки, зачем тот кто верстал собственно так изгалялся? :help:


Часовой пояс GMT +3, время: 16:02.