ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Закладки на странице через CSS
18 сообщений из 18, страница 1 из 1
Закладки на странице через CSS
    #35558631
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
Подскажите как реализовать подобную вещь?
Именно на css.
Загружается страница, грузится содержимое например 3-х закладок, но активна первая. Далее при клике на 2 или 3 открывается div с содержимым 2 или 3-й закладки.

Т.е. избавляемся от перезагрузки всей страницы.
...
Рейтинг: 0 / 0
25.09.2008, 10:09
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35558638
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Alex721...при клике на 2 или 3 открывается div...
Это никак на цсс не реализовать.
...
Рейтинг: 0 / 0
25.09.2008, 10:12
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35558745
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
ShSerge Alex721...при клике на 2 или 3 открывается div...
Это никак на цсс не реализовать.
Можно.
Вот нашел один вариант и еще один ...
Ковыряю.
...
Рейтинг: 0 / 0
25.09.2008, 10:45
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35559264
apapacy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
apapacy
Участник
Alex721 ShSerge Alex721...при клике на 2 или 3 открывается div...
Это никак на цсс не реализовать.
Можно.
Вот нашел один вариант и еще один ...
Ковыряю.

Серж правильно ответил Вам на вопрос. Это не CSS, а DHTML, то есть DOM+CSS+JavaScript. Такие компоненты есть практически в любой библиотеке, реализующей пресловутые виджеты. Их несложно разработать и самому. Если только есть хороший художник, который нарисует красивые закладки.
...
Рейтинг: 0 / 0
25.09.2008, 13:16
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35559337
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
А что скажете про это
Кроме цсс кажется ничего.
Меня интересует как можно сделать (пусть не только на цсс, если невозможно) чтобы при уводе мышки с дивов выбранный блок оставался активным, а не сворачивались обратно как в этом примере?
...
Рейтинг: 0 / 0
25.09.2008, 13:32
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35559417
apapacy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
apapacy
Участник
Да действительно можно использовать возможности CSS и hover. Но это действует только не в ИЕ. В ИЕ используют хук - элемент A, потому что не полная поддержка спецификации.
Так действительно можно делать с всевозможными ухищрениями.
Я бы эту траничку назвал не столько закладками, сколько меню с перезагрузкой контента. Я действительно с закладками ассоциирую определенный функционал, который на чистом CSS достичь нельзя. Тут на форуме тиспользование a+hover наоднократно обсуждалось. Этот способ имеет даже свое название (Я, откровенно говоря, его не использую)
...
Рейтинг: 0 / 0
25.09.2008, 13:52
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35559449
apapacy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
apapacy
Участник
Alex721
Меня интересует как можно сделать (пусть не только на цсс, если невозможно) чтобы при уводе мышки с дивов выбранный блок оставался активным, а не сворачивались обратно как в этом примере?
Для этого при наведении или при клике по элементу меняется его стилевой класс
Код: plaintext
1.
<div onclick="this.class='itemSelected';">Item  1 </div>
...
Рейтинг: 0 / 0
25.09.2008, 13:57
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35559661
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
apapacyДля этого при наведении или при клике по элементу меняется его стилевой класс
Код: plaintext
1.
<div onclick="this.class='itemSelected';">Item  1 </div>
Спасибо!
ЗЫ. только this.className
...
Рейтинг: 0 / 0
25.09.2008, 14:47
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35560127
apapacy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
apapacy
Участник
Ну конечно.
...
Рейтинг: 0 / 0
25.09.2008, 16:28
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35561119
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
что-то не пойму.

Помогите с самым простым примером. 3 дива, при клике на каждом - под ним показывается сопутствующий контент для кликнутого дива.
...
Рейтинг: 0 / 0
26.09.2008, 08:35
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35561185
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Таки тестовый пример напиши - поможем...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
26.09.2008, 09:26
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35561220
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
...
Рейтинг: 0 / 0
26.09.2008, 09:46
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35561232
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
вообще PAGE1,2,3 не суть в блочности, можно и списком, главное чтобы через css и кроссбраузерность.
...
Рейтинг: 0 / 0
26.09.2008, 09:52
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35561303
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alex721 , текст html-ный давай... Или его тоже за тебя писать нужно?
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
26.09.2008, 10:19
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35561405
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
Код: plaintext
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.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
<?xml version="1.0" encoding="windows-1251"?>
<!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=windows-1251" />
		<title>Test Page</title>
    	<style type="text/css">

#info {font-family:font-family:"trebuchet ms", trebuchet, arial, sans-serif; font-size:1em;}
#menu {
  margin: 0 ; 
  padding: 0 ; 
  height: 32 .5em; 
  overflow:hidden; 
  background:#f0f0f0;
  }
#menu li {
  list-style-type:none; 
  float:left; 
  display:block; 
  width: 100 %;
  }
#menu li a {
  display:block; 
  text-decoration:none; 
  color:#00b; 
  margin: 0 ; 
  width: 100 %;
  }
#menu li a span {
  display:none; 
  color:# 000 ;
  }
#menu li a.one span {
  display:block; 
  height:15em; 
  margin: 0  10px;
  }
#menu li a:hover {
  background:#f1f1f1;
  }
#menu li a:hover span {
  display:block; 
  height:15em; 
  margin: 0  10px; 
  cursor:pointer;
  }
#menu .h2 {
  margin: 0  5px; 
  padding: 0 ; 
  color:# 808 ; 
  font-variant:small-caps; 
  font-size: 1 .5em; 
  border: 0 ;
  }
#menu .h3 {
  margin: 0  5px; 
  padding: 0 ; 
  font-size: 1 .1em; 
  color:#00b;
  }
#menu img {
  margin:5px 5px 5px  0 ; 
  border:1px solid # 000 ; 
  float:left;
  }
.curved {
  width:21em;
  margin: 0  auto;
  }
.curved .b1, .curved .b2, .curved .b3, .curved .b4  {
  font-size:1px; 
  display:block; 
  background:#88c;
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */ 
}
.curved .b1, .curved .b2, .curved .b3 {
  height:1px;
  }
.curved .b2, .curved .b3, .curved .b4 {
  background:#f0f0f0; 
  border-left:1px solid #88c; 
  border-right:1px solid #88c;
  }
.curved .b1 {
  margin: 0  4px; 
  background:#88c;
  }
.curved .b2 {
  margin: 0  2px; 
  border-width: 0  2px;
  }
.curved .b3 {
  margin: 0  1px;
  }
.curved .b4 {
  height:2px; 
  margin: 0 ;
  }
.curved .c1 {
  margin: 0  5px; 
  background:#88c;
  }
.curved .c2 {
  margin: 0  3px; 
  border-width: 0  2px;
  }
.curved .c3 {
  margin: 0  2px;
  }
.curved .c4 {
  height:2px; 
  margin:  0  1px;
  }
.curved .boxcontent {
  display:block; 
  background:transparent; 
  border-left:1px solid #88c; 
  border-right:1px solid #88c; 
  font-size: 0 .9em; 
  text-align:justify;}
  
  
</style>

	
	</head>

<body id="www-cssplay-co-uk">
<div class="curved">
 <b class="b1 c1"></b>
 <b class="b2 c2"></b>
 <b class="b3 c3"></b>
 <b class="b4 c4"></b>
  <div class="boxcontent">
   <ul id="menu">
    <li>
     <a class="m5 five" href="#nogo">
      <b class="h2">Paul Cézanne</b><br />
      <b class="h3">( 1839 - 1906 )</b>
      <span>
       <img src="../img/cezanne.jpg" alt="painting" title="painting" />
       The French painter who exhibited little in his lifetime and pursued 
       his interests increasingly in artistic isolation, is regarded today 
       as one of the great forerunners of modern painting.
      </span>
     </a>
    </li>
    <!-- =================================-->
    <li>
     <a href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">Henri Matisse</b><br />
      <b class="h3">( 1869 - 1954 )</b>
      <span>
       <img src="../img/matisse.jpg" alt="painting" title="painting" />
       Initially planned a career as a lawyer. However, he began to paint 
       after an acute attack of appendicitis and then proceeded to become 
       a leader in many art circles.
      </span>
     </a>
    </li><!-- =================================-->
    <li>
     <a href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">William Turner</b><br />
      <b class="h3">( 1775 - 1851 )</b>
      <span>
       <img src="../img/turner.jpg" alt="painting" title="painting" />
       This English painter was one of the greatest romantic interpreters 
       of nature in the history of Western art and is still unrivaled in 
       the virtuosity of his painting of light.
      </span>
     </a>
    </li><!-- =================================-->
    <li>
     <a class="m5 five" href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">John Constable</b><br />
      <b class="h3">( 1776 - 1837 )</b>
      <span>
       <img src="../img/constable.jpg" alt="painting" title="painting" />
       Tried to capture informally the effects of changing light and the 
       patterns of clouds moving across the country sky. He loved the 
       countryside, and his best work was of outdoor scenes in his native 
       Suffolk.
      </span>
     </a>
    </li><!-- =================================-->
    <li>
     <a class="one" href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">Claude Monet</b><br />
      <b class="h3">( 1840 - 1926 )</b>
      <span>
       <img src="../img/monet.jpg" alt="painting" title="painting" />
       Monet's concern was to reflect the influence of light on a subject. 
       He never abandoned his Impressionist painting style until his death 
       in  1926  when Fauvism and Cubism were en vogue and when abstract 
       painting came into existence.
      </span>
     </a>
    </li><!-- =================================-->
   </ul>
  </div>
 <b class="b4 c4"></b>
 <b class="b3 c3"></b>
 <b class="b2 c2"></b>
 <b class="b1 c1"></b>
</div>
	</body>

</html>

Выглядит вот так:
...
Рейтинг: 0 / 0
26.09.2008, 10:53
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35561428
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
Вот так выглядит

Цсс знаю не настолько чтобы переделать это в горизонтальный вид, по схемке :)
В стиле слишком много лишних элементов (скругленные уголки и прочее) убрать бы их возможно станет проще..
...
Рейтинг: 0 / 0
26.09.2008, 11:00
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35561507
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
ыыыы.... как много кода... прямо поэма... что же, нам тут все за тебя переделывать? Давай начнем с чего попроще - например, с реализации PAGE1,2,3 с твоей картинки. Не претендую на оптимальность кода, но что-то типа такого:

Код: plaintext
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.
<style>
.tabs {width: 50 %; }
.tabs .head div {float:left; background:#cad; padding: 10px; }
.tabs .head div.selected { background:#ddd; }
.tabs .content { clear:left; }
.tabs .content div { float:left; background:#ddd; width: 100 %; height:300px; }
.tabs .splitter { clear:both; }
</style>

<script>
function showTab(obj){
	var tabs = obj.parentNode.getElementsByTagName('div');
	for (var i= 0 ; i<tabs.length; i++)
	{
		tabs[i].className = (tabs[i]==obj)?'selected':'';
		document.getElementById('tab'+i).style.display = (tabs[i]==obj)?'block':'none';
	}
}
</script>

<div class="tabs">
	<div class="head">
		<div class="selected" onclick="showTab(this)">qwert</div>
		<div onclick="showTab(this)">asdfg</div>
		<div onclick="showTab(this)">zxcvb</div>
	</div>
	<div class="content">
		<div id="tab0" style="display:block">tab1 text</div>
		<div id="tab1" style="display:none">tab2 text</div>
		<div id="tab2" style="display:none">tab3 text</div>
	</div>
	<div class="splitter"></div>
</div>

bla-bla-bla...
...
Рейтинг: 0 / 0
26.09.2008, 11:14
| Ответить | Цитировать | Написать  
Закладки на странице через CSS
    #35561612
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
illion, отлично!
Хоть не голый цсс, но подойдет, спасибо :)
...
Рейтинг: 0 / 0
26.09.2008, 11:35
| Ответить | Цитировать | Написать  
18 сообщений из 18, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Закладки на странице через CSS
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=319&tid=1455848]:
 0ms
get settings:
 9ms
get forum list:
 16ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 59ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 39ms
get tp. blocked users:
 1ms
others: 246ms
total:  385ms
созд. / загр.: 385ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]