Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 21.11.2019, 15:10   #1
Vovan6996
 
Регистрация: 28.06.2011
Сообщений: 6
По умолчанию list-tab Bootstrap реализация вертикального меню.

Здравствуйте форумчане)))
Не могу разобраться.
Как сделать так, что-бы при нажатие на первую кнопку показывалось содержание остальных ( а лучше выборочно )

Код:
<div class="bd-example" role="tabpanel">
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
        <a class="list-group-item list-group-item-action active show" id="list-1-list" data-toggle="tab" href="#list-1" role="tab" aria-controls="list-1" aria-selected="true">Home</a>
<a class="list-group-item list-group-item-action" id="list-2-list" data-toggle="tab" href="#list-2" role="tab" aria-controls="list-2">Profile</a>
<a class="list-group-item list-group-item-action" id="list-3-list" data-toggle="tab" href="#list-3" role="tab" aria-controls="list-3" aria-selected="false">Messages</a>
<a class="list-group-item list-group-item-action" id="list-4-list" data-toggle="tab" href="#list-4" role="tab" aria-controls="list-4" aria-selected="false">Settings</a></div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
 
 
 
 
<div class="tab-pane fade active show" id="list-1" role="tabpanel" aria-labelledby="list-1-list">
 
111111111111
 
</div>
<div class="tab-pane fade" id="list-2" role="tabpanel" aria-labelledby="list-2-list">
 
2222222222222
 
</div>
<div class="tab-pane fade" id="list-3" role="tabpanel" aria-labelledby="list-3-list">
 
3333333333
 
 
</div>
</div>
</div>
</div>
http://jsfiddle.net/Vovan6996/7bm3xfw5/
Vovan6996 вне форума Ответить с цитированием
Старый 21.11.2019, 17:00   #2
Alar
Александр
Администратор
 
Аватар для Alar
 
Регистрация: 28.10.2006
Сообщений: 17,758
По умолчанию

это html а скрипты где?
Alar вне форума Ответить с цитированием
Старый 22.11.2019, 08:52   #3
Vovan6996
 
Регистрация: 28.06.2011
Сообщений: 6
По умолчанию

Bootstrap 4
Цитата:
Сообщение от Alar Посмотреть сообщение
это html а скрипты где?
Bootstrap 4
Vovan6996 вне форума Ответить с цитированием
Старый 22.11.2019, 11:06   #4
Alar
Александр
Администратор
 
Аватар для Alar
 
Регистрация: 28.10.2006
Сообщений: 17,758
По умолчанию

Прочитал ман

https://getbootstrap.com/docs/4.3/components/navs/

Очевидно что вы взяли отсюда

Код:
<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>
Ваша проблема в том что вы панель вкладок хочите использовать не так как задумано скриптами Bootstrap 4

Что можно сделать - переписать скрипты Bootstrap 4 или делать без Bootstrap 4, для таких простых решениё вообще скрипты не нужны достаточно CSS+HTML накидайте страниц и пересчёлкиваете.

В любом случае при такой реализации поисковик всё равно видит вашу страницу так

http://jsfiddle.net/1tpbdwmL/
Alar вне форума Ответить с цитированием
Старый 22.11.2019, 11:16   #5
Alar
Александр
Администратор
 
Аватар для Alar
 
Регистрация: 28.10.2006
Сообщений: 17,758
По умолчанию

Если хочешь делать всё таки с Bootstrap, то
тебе нужно взять только вертикальное меню

вот это

Код:
<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
или вот это

Код:
<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
А страницы создать отдельно, включив в каждую из них это меню.
Alar вне форума Ответить с цитированием
Старый 22.11.2019, 13:45   #6
Vovan6996
 
Регистрация: 28.06.2011
Сообщений: 6
По умолчанию

Цитата:
Сообщение от Alar Посмотреть сообщение
накидайте страниц и пересчёлкиваете.



http://jsfiddle.net/1tpbdwmL/

Мне нужно не переход по странице. А именно открытие текста. И что бы была кнопка которая активирует несколько других кнопок

http://jsfiddle.net/Vovan6996/7bm3xfw5/
Vovan6996 вне форума Ответить с цитированием
Старый 22.11.2019, 14:17   #7
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от Vovan6996 Посмотреть сообщение
Мне нужно не переход по странице. А именно открытие текста. И что бы была кнопка которая активирует несколько других кнопок

http://jsfiddle.net/Vovan6996/7bm3xfw5/
Дак покури ты доку бутстрапа!
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 22.11.2019, 14:43   #8
Vovan6996
 
Регистрация: 28.06.2011
Сообщений: 6
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Дак покури ты доку бутстрапа!
уже неделю курю. По разному пробывал, не фига не получается. Если подскажите в какую сторону копать,буду благодарен.
Vovan6996 вне форума Ответить с цитированием
Старый 22.11.2019, 14:53   #9
Alar
Александр
Администратор
 
Аватар для Alar
 
Регистрация: 28.10.2006
Сообщений: 17,758
По умолчанию

Цитата:
Сообщение от Vovan6996 Посмотреть сообщение
уже неделю курю. По разному пробывал, не фига не получается. Если подскажите в какую сторону копать,буду благодарен.
перечитай что я тебе ответил.
Если хочешь написать свой скрипт - пишешь свой скрипт, это заняло бы сильно меньше времени чем неделя.
нашёл бы давно что нибудь в любой из коллекции скриптов, то что ты хочешь сделать, ещё лет 10 назад на яваскриптах было написано. пока ищёшь может вертящиеся часы ещё себе на сайт заберёшь или типа того )

скачай брутстрап скрипт и модернизируй его под себя. если очень надо.
но чувствуется что это какая-то никому не нужная курсовая, которую проще накидать html файликами сдать и забыть, а ты наше время тратишь.
Alar вне форума Ответить с цитированием
Старый 22.11.2019, 15:24   #10
Vovan6996
 
Регистрация: 28.06.2011
Сообщений: 6
По умолчанию

Цитата:
Сообщение от Alar Посмотреть сообщение
скачай брутстрап скрипт и модернизируй его под себя. если очень надо.
но чувствуется что это какая-то никому не нужная курсовая, которую проще накидать html файликами сдать и забыть, а ты наше время тратишь.
https://norbi-tv.ru/%d0%b0%d0%b0%d0%b0%d0%b0/
Vovan6996 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как убрать кружочки из вертикального меню? BrandNamus WordPress и другие CMS 1 14.03.2017 14:26
Сворачивание меню в Bootstrap CraZZZy-GameRRR HTML и CSS 0 01.03.2015 20:13
Реализация класса List (C++) Bitter_Schokolade Помощь студентам 0 17.11.2013 11:48
Правка вертикального меню в CSS Artem93 Общие вопросы C/C++ 1 11.06.2011 00:59
Правка вертикального меню в CSS Artem93 Помощь студентам 1 11.06.2011 00:58