Вкладки+спойлер

@Александр8867 · Регистрация: 14.02.2015

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

Здравствуйте,нужна помощь.
Движок сайта DLE 10.0
Решил сделать красивые вкладки для сайта, все подключил, выровнял, вкладки заработали а спойлеры из новостей пропали( притом навсегда. Не хотят показаться родимые хотя и должны.
Думаю дайка js код уберу этот:

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(document).ready(function() {
        $("#content div").hide(); // Скрытое содержимое
 
 $("#tabs li:first").attr("id","current"); // Какой таб показать первым
        $("#content div:first").fadeIn(); // Показ первого контента таба
 $('#tabs a').click(function(e) {
        e.preventDefault();
        $("#content div").hide(); //Скрыть всё содержимое
$("#tabs li").attr("id",""); //Сброс идентификаторов
$(this).parent().attr("id","current"); // Активация идентификаторов
 $('#' + $(this).attr('title')).fadeIn(); // Показать содержимое текущей вкладки
    });
})();
</script>

И надо же спойлеры появились,только вкладки перестали работать. Подскажите,что тут не так?

zhibirc · 14.02.2015, 12:34

JavaScript
1
$("#content div").hide();

Убедитесь, что эта строчка делает то, что должна, и не делает того, чего не должна.

@Александр8867 · 14.02.2015, 12:38 **[ТС]**

JavaScript
1
$("#content div").hide(); //Скрыть всё содержимое

Без этой строчки вкладки не переключаются вообще,а спойлеры также не появились(

@Александр8867 · 14.02.2015, 15:35 **[ТС]**

Все алилуя алилуя!!!
Может кому пригодится=)
Вот вкладки для DLE движка тестировалось на 10.0 версии

CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
.dle_tabPane{
       
        height:26px;    /* Height of tabs */
    }
    .dle_aTab{
        
        border:1px  solid #185D75;
        padding:5px;        
        
    }
    .dle_tabPane DIV{
 
background: #185D75;
-webkit-border-top-left-radius: 8px; /* Safari, Chrome */
                -webkit-border-top-right-radius: 8px; /* Safari, Chrome */
                  -khtml-border-top-left-radius: 8px; /* KHTML */
                 -khtml-border-top-right-radius: 8px; /* KHTML */
                         -moz-border-radius-topleft: 8px; /* Firefox */
                        -moz-border-radius-topright: 8px; /* Firefox */
                                 border-top-left-radius: 8px; /* CSS3 */
                                border-top-right-radius: 8px; /* CSS3 */
float:left;
        padding-left:3px;
        vertical-align:middle;
        background-repeat:no-repeat;
        background-position:bottom left;
        cursor:pointer;
        position:relative;
        bottom:-1px;
        margin-left:0px;
        margin-right:0px;
 
        
    }
 
    .dle_tabPane .tabActive{
 
background: #c93434;
-webkit-border-top-left-radius: 8px; /* Safari, Chrome */
                -webkit-border-top-right-radius: 8px; /* Safari, Chrome */
                  -khtml-border-top-left-radius: 8px; /* KHTML */
                 -khtml-border-top-right-radius: 8px; /* KHTML */
                         -moz-border-radius-topleft: 8px; /* Firefox */
                        -moz-border-radius-topright: 8px; /* Firefox */
                                 border-top-left-radius: 8px; /* CSS3 */
                                border-top-right-radius: 8px; /* CSS3 */
 
    
}
    .dle_tabPane .tabInactive{
 
background: #c286A82;
-webkit-border-top-left-radius: 8px; /* Safari, Chrome */
                -webkit-border-top-right-radius: 8px; /* Safari, Chrome */
                  -khtml-border-top-left-radius: 8px; /* KHTML */
                 -khtml-border-top-right-radius: 8px; /* KHTML */
                         -moz-border-radius-topleft: 8px; /* Firefox */
                        -moz-border-radius-topright: 8px; /* Firefox */
                                 border-top-left-radius: 8px; /* CSS3 */
                                border-top-right-radius: 8px; /* CSS3 */
    }
 
 
    .dle_tabPane .inactiveTabOver{
        margin-left:0px;
        margin-right:0px;
    }
.dle_tabPane span{
 
        font-family:tahoma;
        vertical-align:top;
        font-size:14px;
        line-height:26px;
        float:left;
 }
    .dle_tabPane .tabActive span{
        padding-bottom:0px;
        line-height:26px;
    }

JS

JavaScript
1
2
 <div class="stext">
    <script type="text/javascript" src="engine/skins/tabs.js"></script>

html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div id="dle_tabView1">
<div class="dle_aTab" style="display:none;">
{full-story}
</div>
<div class="dle_aTab" style="display:none;">
[xfgiven_screens]<a href="[xfvalue_screens]" onclick="return hs.expand(this)"><img src="[xfvalue_screens]" width="200" height="100" border="0"></a>[/xfgiven_screens][xfgiven_screens1]<a href="[xfvalue_screens1]" onclick="return hs.expand(this)"><img src="[xfvalue_screens1]" width="200" height="100" border="0"></a>[/xfgiven_screens1][xfgiven_screens2]<a href="[xfvalue_screens2]" onclick="return hs.expand(this)"><img src="[xfvalue_screens2]" width="200" height="100" border="0"></a>
    [/xfgiven_screens2]
    <center>[xfnotgiven_screens]<font color=red size=3>Скриншоты к этому торренту не найдены![/xfnotgiven_screens]</font></center>
 
 
 
<br><br><br><br><br><br>
</div>
<div class="dle_aTab" style="display:none;">
<center>
[xfgiven_treyler]
<iframe src="[xfvalue_treyler]" frameborder="0" height="320" width="426" ></iframe>
[/xfgiven_treyler] 
[xfnotgiven_treyler]<font color=red size=3>Трейлер к этому торренту не найден![/xfnotgiven_treyler]</font></center>
</div>
<div class="dle_aTab" style="display:none;">
<center>[xfgiven_online]
<iframe src="[xfvalue_online]" frameborder="0" height="360" width="540" ></iframe>
[/xfgiven_online] 
        [xfnotgiven_online]<font color=red size=3>Видео к этому торренту не найдено![/xfnotgiven_online]</font></center>
<br><br>
 
</div>
</div>
<script type="text/javascript">
initTabs('dle_tabView1',Array('<font color=#FFFFFF>Описание</font>','<font color=#FFFFFF>Скриншоты</font>','<font color=#FFFFFF>Трейлер</font>','<font color=#FFFFFF>Смотреть онлайн</font>'),0, '100%',0);
</script>

Вот и все. Все работает. Скриншот вкладки прилагается.
PS: Я это сделал не зная языка программирования в течении 1 суток.

@vik1105 · 17.03.2015, 07:23

Здравствуйте,а вы не могли бы объяснить куда вставлять эти коды?
Я вставляю:
1.CSS: в styles.css
2.JS скрипт:в main.tpl
3.HTML: в fullstory.tpl
Создал доп поля,но никаких изменений не произошло.Подскажите сто не так делаю? Спасибо.
Версия DLE 10.1

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@vik1105 0 / 0 / 0 Регистрация: 17.03.2015 Сообщений: 5
	17.03.2015, 07:23
	Здравствуйте,а вы не могли бы объяснить куда вставлять эти коды? Я вставляю: 1.CSS: в styles.css 2.JS скрипт:в main.tpl 3.HTML: в fullstory.tpl Создал доп поля,но никаких изменений не произошло.Подскажите сто не так делаю? Спасибо. Версия DLE 10.1 0

Опции темы