Как сделать смену содержимого блока при нажатии на див

@krash_laiv · Регистрация: 20.12.2018

Студворк — интернет-сервис помощи студентам

Нужно сделать так что бы при нажатии на панель высвечивалось описание пакета
и при том событие onclick не действовала на кнопку заказать

Как сделать смену содержимого блока при нажатии на див

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
      </table>
        <table align="center" class="kit" border="1px">
         <tr>
            <td style="background-color:#FFF;">РАЗРАБОТКА <BR><B>ЛОГОТИПА</B><hr align="left"></td>
            <td style="background-color:#00adef;" class="element"><h2>Стартап</h2><br>-2 варианта<br><h2>30 000 руб.</h2><br><br><button class="order" onclick="order()">Заказать</button><br>Подробнее</td>
            <td style="background-color:#0396cd;" class="element"><h2>Vip</h2><br>-4 варианта<br><h2>40 000 руб.</h2><br><br><button class="order" onclick="order()">Заказать</button><br>Подробнее</td >
            <td style="background-color:#0283b3;" class="element"><h2>Premium</h2><br>-6 варианта<br><h2>50 000 руб.</h2><br><br><button class="order" onclick="order()">Заказать</button><br>Подробнее</td >
         </tr>
         <tr>
         <td colspan="4">
         <h1>Пакет <span class="blue" style="font-size:30px;">"Стартап"</span> включает в себя:</h1>
         <p>Предоставим 2 разных концепции+доработка
<br>Проекции логотипа на поверхности (визитки/футболки/упаковки)
<br>Сделаем за 3 дня
<br>Подбор цвета и шрифта
<br>Исходные файлы готовы для печати (.ai)
<br>Лого на прозрачном фоне (.png)
<br>Полная передача прав</p>
<h1>Цена: <span class="blue" style="font-size:35px;">30 000 руб</span></h1>
         </tr>   
      </table>

Описание должно быть именно в нижнем <td>

@IamRain · 10.08.2019, 14:14

jquery или pure js?

Добавьте data-атрибуты с id-шниками (например с 1 до 4)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//На джейкверях:
$(function(){
    $("table td").on("click", function(e) {
       e.stopPropagation();
       var id = +$(this).data("id");
       var descr = $("p.description");
       
         switch(id) { 
           case 1: descr.text('один текст'); break;
           case 2: descr.text('другой текст'); break;
           //  и т.д.
 
         }
         
 
})
})

HTML5
1
2
3
4
5
6
7
8
9
10
11
<tr>
            <td style="background-color:#FFF;" data-id="1">РАЗРАБОТКА <BR><B>ЛОГОТИПА</B><hr align="left"></td>
            <td style="background-color:#00adef;" data-id="2" class="element"><h2>Стартап</h2><br>-2 варианта<br><h2>30 000 руб.</h2><br><br><button class="order" onclick="order()">Заказать</button><br>Подробнее</td>
            <td style="background-color:#0396cd;" data-id="3" class="element"><h2>Vip</h2><br>-4 варианта<br><h2>40 000 руб.</h2><br><br><button class="order" onclick="order()">Заказать</button><br>Подробнее</td >
            <td style="background-color:#0283b3;" data-id="4" class="element"><h2>Premium</h2><br>-6 варианта<br><h2>50 000 руб.</h2><br><br><button class="order" onclick="order()">Заказать</button><br>Подробнее</td >
         </tr>
       <tr>
        <td  colspan="4">
        <p class="description"></p> 
</td>
</tr>

Добавлено через 3 минуты
Если я правильно понял.

@krash_laiv · 10.08.2019, 14:26 **[ТС]**

Сообщение от IamRain

//На джейкверях:

А можно на js так как с jquery я не особо дружу
и как я понял тут меняется содержимое только тега <P> а мне надо что бы менялось содержимое <td>

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»