Задать вопрос
@GooseTheDestroyer
javascript

Как скрывать div в Bootstrap 3 с помощью tab'ов?

День добрый. Столкнулся с такой проблемой.
При загрузке страницы отображается div id="KK1", соответствующий ссылке "КК" . При нажатии на ссылку "ГУ/ГФ", появляется div id="gugf1". Эта часть в порядке.
Но никак не могу добиться, того, чтобы при нажатии на "ГУ/ГФ", и появлении соотв панели, скрывалась панель "КК".
Подскажите пожалуйста, что я должен дописать?
ВАЖНО: Использовать можно только стандартные средства Bootstrap и JQuery.

<body>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Объект Учёта</h3>
                        </div>
                        <div class="panel-body">
                            <ul class="list-group" id="myTabs">
                                <a href="#" class="list-group-item">Создание</a>
                                <ul>
                                    <li><a data-toggle="tab" href="#KK1">КК</a></li>
                                    <li><a data-toggle="tab" href="#gugf1">ГУ/ГФ</a></li>
                                </ul>  
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="tab-content">
                    <div class="col-md-9">
                        <div id="KK1" class="panel panel-default tab-pane fade in active">
                            <div class="panel-heading">Статьи по теме</div>
                            <div class="panel-body">
                                <table class="table table-condensed table table-hover">
                                    <col width="30%"><col width="70%">
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #1 Статья #1</a></td>
                                        <td>Краткое описание статьи #1</td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #1 Статья #2</a></td>
                                        <td>Краткое описание статьи #2</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #1 Статья #3</a></td>
                                        <td>Краткое описание статьи #3</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #1 Статья #4</a></td>
                                        <td>Краткое описание статьи #4</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #1 Статья #5</a></td>
                                        <td>Краткое описание статьи #5</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div id="gugf1" class="panel panel-default tab-pane fade">
                            <div class="panel-heading">Статьи по теме</div>
                            <div class="panel-body">
                                <table class="table table-condensed table table-hover">
                                    <col width="30%"><col width="70%">
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #2 Статья #1</a></td>
                                        <td>Краткое описание статьи #1</td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #2 Статья #2</a></td>
                                        <td>Краткое описание статьи #2</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #2 Статья #3</a></td>
                                        <td>Краткое описание статьи #3</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #2 Статья #4</a></td>
                                        <td>Краткое описание статьи #4</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #2 Статья #5</a></td>
                                        <td>Краткое описание статьи #5</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  • Вопрос задан
  • 233 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 2
AndrewHaze
@AndrewHaze
Умею гуглить яндексом
Это не Bootstrap
<ul class="list-group" id="myTabs">
                                <a href="#" class="list-group-item">Создание</a>
                                <ul>
                                    <li><a data-toggle="tab" href="#KK1">КК</a></li>
                                    <li><a data-toggle="tab" href="#gugf1">ГУ/ГФ</a></li>
                                </ul>  
                            </ul>


Неправильно

<div class="tab-content">
                    <div class="col-md-9">
                          <div id="KK1" class="panel panel-default tab-pane fade in active">

Надо так
<div class="col-md-9">
       <div class="tab-content">
                  <div id="KK1" class="panel panel-default tab-pane fade in active">
                  </div>
                   <div id="gugf1" class="panel panel-default tab-pane fade">
       </div>
</div>
Ответ написан
3 комментария
3 комментария
brekot
@brekot
Вот так вставляй:

<div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Объект Учёта</h3>
                        </div>
                        <div class="panel-body">
                            <ul class="list-group" id="myTabs">
                                <a href="#" class="list-group-item">Создание</a>
                                <ul>
                                    <li><a data-toggle="tab" href="#KK1">КК</a></li>
                                    <li><a data-toggle="tab" href="#gugf1">ГУ/ГФ</a></li>
                                </ul>  
                            </ul>
                        </div>
                    </div>
                </div>
				<div class="col-md-9">
					<div class="tab-content">
                        <div id="KK1" class="panel panel-default tab-pane fade in active">
                            <div class="panel-heading">Статьи по теме</div>
                            <div class="panel-body">
                                <table class="table table-condensed table table-hover">
                                    <col width="30%"><col width="70%">
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #1 Статья #1</a></td>
                                        <td>Краткое описание статьи #1</td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #1 Статья #2</a></td>
                                        <td>Краткое описание статьи #2</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #1 Статья #3</a></td>
                                        <td>Краткое описание статьи #3</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #1 Статья #4</a></td>
                                        <td>Краткое описание статьи #4</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #1 Статья #5</a></td>
                                        <td>Краткое описание статьи #5</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div id="gugf1" class="panel panel-default tab-pane fade">
                            <div class="panel-heading">Статьи по теме</div>
                            <div class="panel-body">
                                <table class="table table-condensed table table-hover">
                                    <col width="30%"><col width="70%">
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #2 Статья #1</a></td>
                                        <td>Краткое описание статьи #1</td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #2 Статья #2</a></td>
                                        <td>Краткое описание статьи #2</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #2 Статья #3</a></td>
                                        <td>Краткое описание статьи #3</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #2 Статья #4</a></td>
                                        <td>Краткое описание статьи #4</td>
                                    </tr>                        
                                    <tr>
                                        <td><a href="#">Пункт #1 Категория #2 Статья #5</a></td>
                                        <td>Краткое описание статьи #5</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
					</div>
                </div>
            </div>
        </div>
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Telegram Парсер бот
24 апр. 2024, в 23:40
10000 руб./за проект
Доработка андроид приложения на kotlin
24 апр. 2024, в 23:13
130000 руб./за проект
Внести правки в Телеграм-бота с помощью кода(PHP-разработчик)
24 апр. 2024, в 22:44
11000 руб./за проект
Ещё заказы