Форум Сайтостроение Веб-строительство

Модернизация CSS вкладок.

[Удален]
1168

Добрый день!

Перейду сразу к делу.

Есть скрипт на jQuery, это скрипт для вкладок на сайте.

Можно ли его модернизировать так, чтобы все вкладки автоматически разворачивались, если JS отключен или не получается найти путь к файлу отвечающему за переключение вкладок.

Сейчас если удалить скрипт отвечающий за переключение, то вкладки становятся не активными и до них уже не добраться чтобы увидеть что там было.

Вот сам скрипт. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>Демонстрация табов</title>

        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.1.min.js"></script>

<style>

    .tabHidden { 

        display: none;

    }

    .tab {

       border: solid 1px black;

    }

    .tabname {

        text-decoration: underline;

        background-color: yellow;

    }

    .tabname-active {

        font-weight: bolder;

    }

</style>

        <script type="text/javascript">

            $(document).ready(function(){ 

            // выполняется при загрузке страницы    

                $('.tabname').click(function(){ 

                //регистрация клика для элементов с классом .tabname

                    $('.tab').addClass('tabHidden');  // Выключаем все

                    $('#'+$(this).attr('tab')).removeClass('tabHidden');  // включаем нужный

                    $('.tabname').removeClass('tabname-active');  // Выключаем все

                    $(this).addClass('tabname-active')

                });

                /*

                 * Псевдо-клик на втором табе для его активации. 

                 * Можно и не делать, ограничиться прописыванием класса 

                 * для того таба, который виден по-умолчанию - так я и сделал.

                 * Но тогда надо не забывать и таб включить, и заголовок

                     $('#tabname2').click();	

                 */

            });

        </script>    



	</head>

	<body>

        [<span id="tabname1" tab="tab1" class="tabname">tab1</span>]	    

        [<span id="tabname2" tab="tab2" class="tabname tabname-active">tab2</span>]	    

        [<span id="tabname3" tab="tab3" class="tabname">tab3</span>]	    

        <div id="tab1" class="tab tabHidden">Tab 1 Tab 1 Tab 1 Tab 1 </div>

        <div id="tab2" class="tab ">Tab 2 Tab 2 Tab 2 Tab 2 </div>

        <div id="tab3" class="tab tabHidden">Tab 3 Tab 3 Tab 3 Tab 3 </div>

        

	</body>

</html>

С уважением Felix

C
На сайте с 04.02.2005
Offline
291
Chukcha
#1

не разбираясь в коде

.tabHidden {

display: block;

}

[Удален]
#2

Нет, не так.

Нужно чтобы всё что в этих блоках было видно только если нету JS файла, который отвечает за переключение вкладок.

Если же JS код есть, это я про этот код 

<script type="text/javascript">

            $(document).ready(function(){ 

            // выполняется при загрузке страницы    

                $('.tabname').click(function(){ 

                //регистрация клика для элементов с классом .tabname

                    $('.tab').addClass('tabHidden');  // Выключаем все

                    $('#'+$(this).attr('tab')).removeClass('tabHidden');  // включаем нужный

                    $('.tabname').removeClass('tabname-active');  // Выключаем все

                    $(this).addClass('tabname-active')

                });

                /*

                 * Псевдо-клик на втором табе для его активации. 

                 * Можно и не делать, ограничиться прописыванием класса 

                 * для того таба, который виден по-умолчанию - так я и сделал.

                 * Но тогда надо не забывать и таб включить, и заголовок

                     $('#tabname2').click();	

                 */

            });

        </script>

То информация должна быть скрыта вкладками.

Felixx добавил 03.03.2011 в 22:42

Мне кажется проще всего убрать

.tabHidden {
display: block;
}

В JS код, кто может помочь в этом?

Google о том, стоит Как контент во вкладках Яндекс Браузер обновил интерфейс
R5
На сайте с 22.03.2010
Offline
24
RFC2505
#3

не пойму как именно хочешь показывать табы при выключенном JS,- просто вывести чтоль? 


$(document).ready(function(){ 

            $('.tab').toggleClass('tabHidden');

            // выполняется при загрузке страницы    

                $('.tabname').click(function(){ 

................

            $('#tabname2').click();

RFC2505 добавил 04.03.2011 в 01:48

ээ, забыл добавить:

а отсюда tabHidden убрать

<div id="tab1" class="tab tabHidden">

....

<div id="tabN" class="tab tabHidden">

зы: разметка у тебя моск выносит, эти меню не так делаются, погугли нормальный экзампл, их оч много )

Как контент во вкладках Как «мусор» попадает в Оптимизируем видео из YouTube
[Удален]
#4

Я перепробовал много вариантов и остановился на этом так как он самый простой и удобный.

Мне единственное нужно эту мелочь подправить.

Когда удаляю 

.tabHidden { 

display: block;

}
<div id="tab1" class="tab tabHidden">
....
<div id="tabN" class="tab tabHidden">

То всё блоки, становятся видны, не зависимо есть JS код или его нету. А хотелось бы так, если JS нету то все блоки видны, если JS есть то не видны.

Может ли когда-нибудь ПС Спрашиваем и отвечаем по Код блока в JS
C
На сайте с 04.02.2005
Offline
291
Chukcha
#5

.tabHidden {

display: none;

}

оставляешь

<div id="tab1" class="tab tabHidden">Tab 1 Tab 1 Tab 1 Tab 1 </div>

...

<div id="tab3" class="tab tabHidden">Tab 3 Tab 3 Tab 3 Tab 3 </div>

Меняешь на

<div id="tab1" class="tab">Tab 1 Tab 1 Tab 1 Tab 1 </div>

...

<div id="tab3" class="tab">Tab 3 Tab 3 Tab 3 Tab 3 </div>

имитируешь клики

$('#tab2').click();

$('#tab3').click();

приблизительно так

по клику добавляется нужный класс

Что при этом происходит?

Все табы видны

Как контент во вкладках Facebook запустил новые рекламные Статистика Сайта 2.1: статистика
[Удален]
#6

При первой загрузке страницы, видны все 3 таблицы, после клика на любую вкладку, открывается только нужная, остальных не видно.

C
На сайте с 28.01.2010
Offline
70
Counselor
#7 

.tabHidden { 

        display: block;

    }

... 

$(document).ready(function(){ 

	$('.tabHidden').hide(0);
Это - личная подпись. Здесь обычно ставят ссылки на всякие кривые сайты, надеясь получить "жирный бек".
[Удален]
#8

Вкладки стали неактивными, отображается только вкладка 2.

C
На сайте с 28.01.2010
Offline
70
Counselor
#9
Felixx:
Вкладки стали неактивными, отображается только вкладка 2.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>Демонстрация табов</title>

        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.1.min.js"></script>

<style>

    .tabHidden { 

        display: block;

    }

    .tab {

       border: solid 1px black;

    }

    .tabname {

        text-decoration: underline;

        background-color: yellow;

    }

    .tabname-active {

        font-weight: bolder;

    }

</style>

        <script type="text/javascript">

            $(document).ready(function(){ 

				$('.tabHidden').hide(0);

            // выполняется при загрузке страницы    

                $('.tabname').click(function(){ 

                //регистрация клика для элементов с классом .tabname

					$('.tab').hide(0);

					$('#'+$(this).attr('tab')).show(0);  // включаем нужный

                    $('.tabname').removeClass('tabname-active');  // Выключаем все

                    $(this).addClass('tabname-active')

                });

            });

        </script>    



	</head>

	<body>

        [<span id="tabname1" tab="tab1" class="tabname">tab1</span>]	    

        [<span id="tabname2" tab="tab2" class="tabname tabname-active">tab2</span>]	    

        [<span id="tabname3" tab="tab3" class="tabname">tab3</span>]	    

        <div id="tab1" class="tab tabHidden">Tab 1 Tab 1 Tab 1 Tab 1 </div>

        <div id="tab2" class="tab">Tab 2 Tab 2 Tab 2 Tab 2 </div>

        <div id="tab3" class="tab tabHidden">Tab 3 Tab 3 Tab 3 Tab 3 </div>

        

	</body>

</html>
[Удален]
#10

Супер! То что было нужно!! Большое спасибо!!

Felixx добавил 04.03.2011 в 14:05

Это

.tabHidden {
display: block;
}

даже можно убрать и без него работате.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий