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

Как сделать вкладки на CSS без перезагрузки?

12
Shtogrin
На сайте с 02.11.2006
Offline
95
Shtogrin
#11
onload = function()

Разве это не одинаковый код? Вы переписываете вторым скриптом обработчик, установленный в первом. Делаете из своего кода две функции f1() и f2(), вставляете код 

function js_set_event(element, eventName, handler)
{
          if(element.addEventListener)
                        element.addEventListener(eventName, handler, false);
          else
                if(element.attachEvent)
                        element.attachEvent('on' + eventName, handler);
}

js_set_event(window, 'load', f1);
js_set_event(window, 'load', f2);
www.shtogrin.com (http://www.shtogrin.com/). Канцтовары (http://www.invit.com.ua/). 1С Бухгалтерия (http://account.kiev.ua/).
P
На сайте с 08.03.2007
Offline
250
Pilat
#12

Как-то всё очень мудрёно получается. Можно проще (c jQuery, можно и с другими библиотеками типа prototype...): 

<!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>
Блог (http://www.pilat66.ru/)
12

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