закладки

[angelShlesser]

Как сделать такое при помощи html!

Переход между темы и форумы, показывает разный контекст!

[Temiks]

Как сделать такое при помощи html!

Переход между темы и форумы, показывает разный контекст!

на html никак, можно например на jq http://ruseller.com/lessons.php?rub=32&id=287

[sigma77]

Temiks,

Ну уж совсем никак?

http://jsfiddle.net/raQQm/

Хотя способ не везде подойдет.

[amelice]

Temiks,

Ну уж совсем никак?

http://jsfiddle.net/raQQm/

Хотя способ не везде подойдет.

sigma77 пример классный! Но мне не понятно, почему ты применила :focus?

Ведь фокус просто указывает на место положение курсора, но не саму активную вкладку на данный момент? На этом примере focus больше работает как hover.

[Temiks]

Temiks,

Ну уж совсем никак?

http://jsfiddle.net/raQQm/

Хотя способ не везде подойдет.

Класс, в заметки, буду знать что еще и на html можно, большой спасибо!!!

[sigma77]

cheburek,

Фокус указывает на тот элемент, который в данный момент получил фокус. Лучше всего это видно на элементах форм, это то состояние когда, например, текстовые поля получают курсор. Также фокус можно заметить при переходе между элементами по табу. Обычно, если это не переопределено, браузеры отображают ссылки в фокусе точечной рамкой.

Поэтому в данном случае, пока не будет сменен фокус ссылка будет иметь оранжевый фон, даже если курсор будет не над ссылкой.

[amelice]

cheburek,

Фокус указывает на тот элемент, который в данный момент получил фокус. Лучше всего это видно на элементах форм, это то состояние когда, например, текстовые поля получают курсор. Также фокус можно заметить при переходе между элементами по табу. Обычно, если это не переопределено, браузеры отображают ссылки в фокусе точечной рамкой.

Поэтому в данном случае, пока не будет сменен фокус ссылка будет иметь оранжевый фон, даже если курсор будет не над ссылкой.

Да, я читала. Но на практике еще не применяла. Вот хотелось побольше узнать как и где применять. Но все же мне кажется, что фокус в этом примере может наоборот озадачить: вроде фокус стоит на одной вкладке, соответственно и цвет вкладки поменялся, а на экране отображается содержимое другой вкладки, активной на данный момент.

Класс, в заметки, буду знать что еще и на html можно, большой спасибо!!!

Да, однозначно! Кстати,Temiks это может такой нелепый вопрос, но мне все же интересно как ты организовываешь заметки, архив и все такое? )

[sigma77]

Но все же мне кажется, что фокус в этом примере может наоборот озадачить: вроде фокус стоит на одной вкладке, соответственно и цвет вкладки поменялся, а на экране отображается содержимое другой вкладки, активной на данный момент.

Вроде вкладка должна соответствовать содержанию, можешь скрин показать?

[Temiks]

У меня возникло два вопроса

1. Если во вкладках будет много контента, то при загрузке странице будет загружаться первая вкладка или все вкладки? или другие вкладки будут загружаться только тогда, когда пользователь их нажмет?

2. Не подскажите как можно сделать, чтобы после нажатии например на первую вкладку у нее появлялось другое бг, после нажатии на вторую вкладку бг переходило с первой вкладки на вторую? и можно ли это реализовать под старые браузеры? (ие6, ие7, опера 9.0 и т.д)

Да, однозначно! Кстати,Temiks это может такой нелепый вопрос, но мне все же интересно как ты организовываешь заметки, архив и все такое? )

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

[amelice]

Но все же мне кажется, что фокус в этом примере может наоборот озадачить: вроде фокус стоит на одной вкладке, соответственно и цвет вкладки поменялся, а на экране отображается содержимое другой вкладки, активной на данный момент.

Вроде вкладка должна соответствовать содержанию, можешь скрин показать?

Ага, минуточку.

[sigma77]

У меня возникло два вопроса

1. Если во вкладках будет много контента, то при загрузке странице будет загружаться первая вкладка или все вкладки? или другие вкладки будут загружаться только тогда, когда пользователь их нажмет?

Загружается всё. Отображаться будет первая вкладка, либо та, которая стоит в якоре в адресной строке. Минус этого решения в том, что все вкладки должны иметь одинаковую высоту. Эта же высота и дива-обёртки. При нажатии на ссылку просто идет переход к соответствующему якорю. А поскольку обертка имеет свойство overflow: hidden, то всё лишнее обрезается.

2. Не подскажите как можно сделать, чтобы после нажатии например на первую вкладку у нее появлялось другое бг, после нажатии на вторую вкладку бг переходило с первой вкладки на вторую? и можно ли это реализовать под старые браузеры? (ие6, ие7, опера 9.0 и т.д)

Задать самим дивам с содержание нужный бг... или вопрос в другом? Под старые должно работать, хотя не проверяла.

[Temiks]

Насчет второго вопроса, я так понял что фокус эту функцию выполняет, но у меня почему то не работает в браузере, оранжевый цвет появляется только при нажатии на закладку, и потом сразу пропадает

[amelice]

[Temiks]

Задать самим дивам с содержание нужный бг... или вопрос в другом?

Немного не так, можно посмотреть как работает на данном форуме, в блоке "Подписки" где "Форумы и Темы"

Изначально стоит бг на Форумы, но при нажатии на закладку Темы, бг которое у Форумы переходит к закладке Темы

Странно, у меня не работает, фф 5.0.1, а так же хром 12, сафари 5,ие9

У меня возникло два вопроса

1. Если во вкладках будет много контента, то при загрузке странице будет загружаться первая вкладка или все вкладки? или другие вкладки будут загружаться только тогда, когда пользователь их нажмет?

Загружается всё. Отображаться будет первая вкладка, либо та, которая стоит в якоре в адресной строке. Минус этого решения в том, что все вкладки должны иметь одинаковую высоту. Эта же высота и дива-обёртки. При нажатии на ссылку просто идет переход к соответствующему якорю. А поскольку обертка имеет свойство overflow: hidden, то всё лишнее обрезается.

Спасибо большое за разъяснение, теперь все понял

Edited July 30, 2011 by Temiks

[amelice]

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

а как библиотеку организовываешь?

Странно, у меня не работает, фф 5.0.1

у меня фф 5.0.

[Softlink]

Странно, у меня не работает, фф 5.0.1, а так же хром 12, сафари 5,ие9

Temiks, добавь ссылкам tabindex, он решит проблему в сафари и хроме. В ФФ 5 и ИЕ9 и он не помогает.

[sigma77]

cheburek,

Temiks,

Да, в новых браузерах есть подобная фигня с фокусом, немного по-другому они его, кажется, обрабатывают.

Немного не так, можно посмотреть как работает на данном форуме, в блоке "Подписки" где "Форумы и Темы"

Изначально стоит бг на Форумы, но при нажатии на закладку Темы, бг которое у Форумы переходит к закладке Темы

Не, так не сделаешь. По крайней мере с ходу не могу придумать

[Softlink]

Не, так не сделаешь. По крайней мере с ходу не могу придумать

угумс Я когда собирал свой сайт, хотел обойтись без скриптов, но мне нужны были табы. Тоже путем проб и ошибок дошел до такого варианта с якорями. Но он не подошел, т.к. ссылка всегда активная и высота содержимого разная. Пришлось через jquery прилепить. Если первую проблему можно визуально исправить за счет text-decoration и cursor, то со вторым вообще беда. Чего только не думал - не получилось.

[angelShlesser]

Вот например пример _http://ruseller.com/lessons.php?rub=32&id=1056

Я хочу что бы он работал только в контексте внутри

<div id="navbar">
	    <ul>
	        <li class="active"><a href="#" title="Projects">Projects<span class="notification">34</span></a></li>
	        <li class="inactive"><a href="#" title="Contacts">Contacts</a></li>
	        <li class="inactive"><a href="#" title="Earnings">Earnings</a></li>
	        <li class="inactive"><a href="#" title="To-do">To-do<span class="notification">100</span></a></li>
	    </ul>
	</div>

А не всезде где использовано

$(document).ready(function(){
 $('li').click(function(){
  var number = $(this).index();
  $('h2').hide().eq(number).show();
  $('p').hide().eq(number).show();
  $(this).toggleClass('active inactive');
  $('li').not(this).removeClass('active').addClass('inactive');
 });

 $('h2').not(':first').hide();
 $('p').not(':first').hide();

});

Как я понимаю. Надо как то задать классы на какие использовать? То есть что то типа такого

$(document).ready(function(){
 $('li.nav').click(function(){
  var number = $(this).index();
  $('h2.nav').hide().eq(number).show();
  $('p.nav').hide().eq(number).show();
  $(this).toggleClass('active inactive');
  $('li.nav').not(this).removeClass('active').addClass('inactive');
 });

 $('h2.nav').not(':first').hide();
 $('p.nav').not(':first').hide();

});

Как вы думаете будет он брать только те в которых класс nav или как то ещё это можно сделать?

[angelShlesser]

Хм, ещё странно использовал данный код

При нажатии почему то он подымается вверх, то есть показывает информацию.

Как сделать так что бы он не просто открывал информацию, а не делал скачёк к ней!

[Temiks]

Странно, у меня не работает, фф 5.0.1, а так же хром 12, сафари 5,ие9

Temiks, добавь ссылкам tabindex, он решит проблему в сафари и хроме. В ФФ 5 и ИЕ9 и он не помогает.

Спасибо, попробую

cheburek,

Temiks,

Да, в новых браузерах есть подобная фигня с фокусом, немного по-другому они его, кажется, обрабатывают.

Немного не так, можно посмотреть как работает на данном форуме, в блоке "Подписки" где "Форумы и Темы"

Изначально стоит бг на Форумы, но при нажатии на закладку Темы, бг которое у Форумы переходит к закладке Темы

Не, так не сделаешь. По крайней мере с ходу не могу придумать

Спасибо, поищу в интернете, может что то найду