Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.10.2017, 13:15
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Переделать табы
Здравствуйте!
Прошу не ругайте, если недостаточно ясно излагаю.
В общем есть у меня таб, сделанный на 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 (permalink)  
Старый 05.10.2017, 15:40
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Попытка номер 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...) ссылки... Так можно сделать?
Ответить с цитированием
  #3 (permalink)  
Старый 05.10.2017, 16:46
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,215

Сообщение от Igorsrt
при нажатии на ссылку добавлял бы к <div class="obl-prim"> новый класс css, соответствующий например классу ссылки (resh-1, resh-2...) ссылки... Так можно сделать?
Да, можно.
Но у меня рабочий день уже кончился... Если никто за вечер не покажет примера - я тебе завтра покажу.
Ответить с цитированием
  #4 (permalink)  
Старый 05.10.2017, 16:51
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

ох, побыстрее бы надо...
Ответить с цитированием
  #5 (permalink)  
Старый 05.10.2017, 17:05
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Не тестировал.
$('[class^="resh-"]').click(function(){
    var cls=$(this).attr('class').split(' ').filter(function(val){
        return val.indexOf('resh-')==0;
    });
    $('.obl-prim').addClass(cls.join(' '));
});

Последний раз редактировалось Nexus, 05.10.2017 в 17:37. Причина: Bugfix. Line 5
Ответить с цитированием
  #6 (permalink)  
Старый 05.10.2017, 17:15
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Сообщение от Nexus Посмотреть сообщение
Не тестировал.
$('[class^="resh-"]').click(function(){
    var cls=$(this).attr('class').split(' ').filter(function(val){
        return val.indexOf('resh-')==0;
    });
    $('.obl-prim').addClass(cls);
});
не срабатывает у меня
Ответить с цитированием
  #7 (permalink)  
Старый 05.10.2017, 17:25
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Igorsrt, консоль браузера смотрели?
В Google Chrome клавиша F12, вкладка "Console".

Библиотека jQuery подключена к странице?
Скрипт разместили в конце страницы?
Ответить с цитированием
  #8 (permalink)  
Старый 05.10.2017, 17:30
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Да, jQuery подключена (сайт на wordpress, там много всяких jQuery скриптов работает)
скрипт вставляю в конец перед </body>
Ответить с цитированием
  #9 (permalink)  
Старый 05.10.2017, 17:38
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Igorsrt, поправил скрипт в комментарии №5.
Смотрите строку №5.
Ответить с цитированием
  #10 (permalink)  
Старый 05.10.2017, 17:44
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Сообщение от Nexus Посмотреть сообщение
Igorsrt, поправил скрипт в комментарии №5.
Смотрите строку №5.
не знаю, все равно не работает почему-то
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работают табы alekspvn jQuery 3 02.09.2017 14:08
Табы в табах:) sergey24 Общие вопросы Javascript 1 26.11.2016 08:10
как можно переделать скрипт elips777 Ваши сайты и скрипты 2 23.10.2016 00:23
Динамические Табы и drag&drop Surlik jQuery 3 16.11.2013 00:53
Скрипт отображающий время. Помогите переделать с 12 часового формата на 24. Etoneja Общие вопросы Javascript 3 11.02.2011 08:49