Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Переделать табы (https://javascript.ru/forum/dom-window/70829-peredelat-taby.html)

Nexus 05.10.2017 17:47

Цитата:

Сообщение от Igorsrt
не знаю, все равно не работает почему-то

<html>
<head>
<title>Untitled</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<!-- список ссылок -->
<ul>
 <li class="active"><a class="resh-1" id="1" href="#1">Ссылка1</a></li>
 <li><a id="2" class="resh-2" href="#2">Ссылка2</a></li>
 <li><a id="3" class="resh-3" href="#3">Ссылка3</a></li>
</ul>
<!--и список элементов -->
<div class="obl-prim">
    <div id="el1" class="col-xs-2">Элемент1</div>
	<div id="el2" class="col-xs-2">Элемент2</div>
	<div id="el3" class="col-xs-2">Элемент3</div>
	<div id="el4" class="col-xs-2">Элемент4</div>
	<div id="el5" class="col-xs-2">Элемент5</div>
	<div id="el6" class="col-xs-2">Элемент6</div>
</div>
<script>
	$(function(){
		$('[class^="resh-"]').click(function(){
			var cls=$(this).attr('class').split(' ').filter(function(val){
				return val.indexOf('resh-')==0;
			});
			$('.obl-prim').addClass(cls.join(' '));
			
			alert($('.obl-prim').attr('class'));
		});
	});
</script>
</body>
</html>

laimas 05.10.2017 18:06

Igorsrt,
подключение скриптов в WP - https://wp-kama.ru/function/wp_enqueue_script

Igorsrt 05.10.2017 18:16

Да, теперь заработало, спасибо... Только мне нужно, что бы старые классы очищались, а то получается после нескольких нажатий
<div id="obl-prim" class="obl-prim resh-4 resh-2 resh-7">
 </div>

laimas 05.10.2017 18:23

А ссылки кроме класса resh-1 могут иметь и другие?

Igorsrt 05.10.2017 18:32

Цитата:

Сообщение от laimas (Сообщение 466652)
А ссылки кроме класса resh-1 могут иметь и другие?

я думаю нет... можно вообще привязать id #obl-prim и очищать все классы при нажатии... вот только как? :)

Igorsrt 05.10.2017 18:42

даже сам разобрался вроде
<script>
	$(function(){
		$('[class^="resh-"]').click(function(){
			var cls=$(this).attr('class').split(' ').filter(function(val){
				return val.indexOf('resh-')==0;
			});
			$('#obl-prim').removeClass();

			$('#obl-prim').addClass(cls.join(' '));
			
		
		});
	});
</script>


Спасибо Вам огромное! :)

laimas 05.10.2017 18:42

Цитата:

Сообщение от Igorsrt
можно вообще привязать id #obl-prim

Нет, лучше списку родителю ссылок (UL) дать ID, для примера box, тогда:

$(function(){
    $('#box a').click(function(e) {
        e.preventDefault();        
        var o = $('.obl-prim');
        o.attr('class', o.attr('class').replace(/resh-\d+/, '')).addClass(this.className);
    });
});

laimas 05.10.2017 18:43

Цитата:

Сообщение от Igorsrt
.attr('class').split(' ').filter

Зачем это, если ссылки имеют один единственный класс?


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