Переделать табы
Здравствуйте!
Прошу не ругайте, если недостаточно ясно излагаю. В общем есть у меня таб, сделанный на bootstrap. И нужно его переделать, а именно: контент из вкладок вытащить т.к. во всех вкладках одинаковый (это не сложно). Но при нажатии на ссылку таба к некоторым элементам по списку, добавлять дополнительный класс css dop_class, согласно спискам.
<!-- ссылки бывших вкладок -->
<ul class="nav nav-tabs">
<li class="active"><a href="#carousel-2658">Ссылка1</a></li>
<li><a href="#carousel-2657">Ссылка2</a></li>
<li><a href="#carousel-2656">Ссылка3</a></li>
</ul>
<!-- список элементов -->
<div>
<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>
<!-- Tab panes -- Бывшие табы - а теперь списки по которым нужно добавлять классы
тут даже не знаю как правильно написать в html, в общем-то не принципиально, надеюсь понятно...-->
<div class="tab-content>
<div class="tab-pane active" id="carousel-2658">
Array ([0] => el1 [1] => el3)
</div>
<div class="tab-pane" id="carousel-2657">
Array ([0] => el1 [1] => el6)
</div>
<div class="tab-pane" id="carousel-2656">
Array ([0] => el2 [1] => el4)
</div>
</div>
Еще раз извиняюсь, сам вижу что как-то не понятно объясняю... :( |
Попытка номер 2... бог с ними с табами - я уже сам понимаю, что это все неправильно... удалил я табы - и вот теперь у меня остается
<!-- список ссылок -->
<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>
Нужен скрипт, который бы при нажатии на ссылку добавлял бы к <div class="obl-prim"> новый класс css, соответствующий например классу ссылки (resh-1, resh-2...) ссылки... Так можно сделать? |
Цитата:
Но у меня рабочий день уже кончился... Если никто за вечер не покажет примера - я тебе завтра покажу. ;) |
ох, побыстрее бы надо...
|
Не тестировал.
$('[class^="resh-"]').click(function(){
var cls=$(this).attr('class').split(' ').filter(function(val){
return val.indexOf('resh-')==0;
});
$('.obl-prim').addClass(cls.join(' '));
});
|
Цитата:
|
Igorsrt, консоль браузера смотрели?
В Google Chrome клавиша F12, вкладка "Console". Библиотека jQuery подключена к странице? Скрипт разместили в конце страницы? |
Да, jQuery подключена (сайт на wordpress, там много всяких jQuery скриптов работает)
скрипт вставляю в конец перед </body> |
Igorsrt, поправил скрипт в комментарии №5.
Смотрите строку №5. |
Цитата:
|
Цитата:
<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>
|
Igorsrt,
подключение скриптов в WP - https://wp-kama.ru/function/wp_enqueue_script |
Да, теперь заработало, спасибо... Только мне нужно, что бы старые классы очищались, а то получается после нескольких нажатий
<div id="obl-prim" class="obl-prim resh-4 resh-2 resh-7"> </div> |
А ссылки кроме класса resh-1 могут иметь и другие?
|
Цитата:
|
даже сам разобрался вроде
<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>
Спасибо Вам огромное! :) |
Цитата:
$(function(){
$('#box a').click(function(e) {
e.preventDefault();
var o = $('.obl-prim');
o.attr('class', o.attr('class').replace(/resh-\d+/, '')).addClass(this.className);
});
});
|
Цитата:
|
| Часовой пояс GMT +3, время: 20:16. |