Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.01.2019, 08:38
Интересующийся
Отправить личное сообщение для oleg13321 Посмотреть профиль Найти все сообщения от oleg13321
 
Регистрация: 14.05.2018
Сообщений: 24

Запретить переход по якорной ссылке
Здравствуйте.
Дали верстку, сказали посадить на 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 в 08:41.
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2019, 09:56
Интересующийся
Отправить личное сообщение для oleg13321 Посмотреть профиль Найти все сообщения от oleg13321
 
Регистрация: 14.05.2018
Сообщений: 24

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

Последний раз редактировалось oleg13321, 23.01.2019 в 09:57. Причина: P.S.: возможно это можно было прописать более изящно?!...
Ответить с цитированием
  #3 (permalink)  
Старый 23.01.2019, 20:21
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,031

Я не думаю, чтобы организовать табы, вам нужно написать так много 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, 23.01.2019 в 22:58.
Ответить с цитированием
  #4 (permalink)  
Старый 24.01.2019, 13:10
Интересующийся
Отправить личное сообщение для oleg13321 Посмотреть профиль Найти все сообщения от oleg13321
 
Регистрация: 14.05.2018
Сообщений: 24

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

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


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

Последний раз редактировалось oleg13321, 24.01.2019 в 13:16.
Ответить с цитированием
  #5 (permalink)  
Старый 24.01.2019, 13:14
Интересующийся
Отправить личное сообщение для oleg13321 Посмотреть профиль Найти все сообщения от oleg13321
 
Регистрация: 14.05.2018
Сообщений: 24

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

Если конечно, вас не затруднит мне объяснить, зачем кому-то изначально понадобилось все это городить?
Ответить с цитированием
  #6 (permalink)  
Старый 24.01.2019, 14:50
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,031

Сообщение от oleg13321
ЭТО НЕ Я!
Я горжусь вами! 🙌 Теперь всё это в ваших руках!

Сообщение от oleg13321
я хотел бы все таки получить разъяснения по сути вопроса
У вас там (согласно посту №1) используется ссылка, а вы стараетесь написать скрипт, чтобы она не вела себя как ссылка. Так замените ссылку на кнопку.
Ответить с цитированием
  #7 (permalink)  
Старый 25.01.2019, 12:32
Интересующийся
Отправить личное сообщение для oleg13321 Посмотреть профиль Найти все сообщения от oleg13321
 
Регистрация: 14.05.2018
Сообщений: 24

Сообщение от Malleys Посмотреть сообщение
У вас там (согласно посту №1) используется ссылка, а вы стараетесь написать скрипт, чтобы она не вела себя как ссылка. Так замените ссылку на кнопку.
Таки да, просто исповедую принцип - "Работает? Не трогай".
Отсюда и мои трудности.
В итоге я решил то собственно эту задачу чуть чуть переписав и дописав, тут уже другой принцип "И так сойдет".

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запретить переход по ссылке tema1508 Общие вопросы Javascript 16 20.03.2018 15:18
Переход по ссылке в зависимости от индификатора chij25 Events/DOM/Window 1 13.12.2017 07:45
Переход по локальной ссылке срабатывает только один раз gnplsk Events/DOM/Window 1 09.07.2016 18:50
Переход по ссылке metlick Общие вопросы Javascript 2 26.12.2015 17:11
Плавный переход к элементу по внешней ссылке deniskutovskiy jQuery 13 16.10.2015 22:30