Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Закладки на странице через CSS / 18 сообщений из 18, страница 1 из 1
25.09.2008, 10:09
    #35558631
Alex721
Alex721
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закладки на странице через CSS
Подскажите как реализовать подобную вещь?
Именно на css.
Загружается страница, грузится содержимое например 3-х закладок, но активна первая. Далее при клике на 2 или 3 открывается div с содержимым 2 или 3-й закладки.

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

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

Помогите с самым простым примером. 3 дива, при клике на каждом - под ним показывается сопутствующий контент для кликнутого дива.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.09.2008, 09:26
    #35561185
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закладки на странице через CSS
Таки тестовый пример напиши - поможем...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.09.2008, 09:46
    #35561220
Alex721
Alex721
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закладки на странице через CSS
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.09.2008, 09:52
    #35561232
Alex721
Alex721
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закладки на странице через CSS
вообще PAGE1,2,3 не суть в блочности, можно и списком, главное чтобы через css и кроссбраузерность.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.09.2008, 10:19
    #35561303
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закладки на странице через CSS
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:53
    #35561405
Alex721
Alex721
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закладки на странице через CSS
Код: 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, 11:00
    #35561428
Alex721
Alex721
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закладки на странице через CSS
Вот так выглядит

Цсс знаю не настолько чтобы переделать это в горизонтальный вид, по схемке :)
В стиле слишком много лишних элементов (скругленные уголки и прочее) убрать бы их возможно станет проще..
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.09.2008, 11:14
    #35561507
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закладки на странице через CSS
ыыыы.... как много кода... прямо поэма... что же, нам тут все за тебя переделывать? Давай начнем с чего попроще - например, с реализации 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:35
    #35561612
Alex721
Alex721
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закладки на странице через CSS
illion, отлично!
Хоть не голый цсс, но подойдет, спасибо :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Закладки на странице через CSS / 18 сообщений из 18, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 673ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1455848]:
 0ms
get settings:
 6ms
get forum list:
 8ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 361ms
get topic data:
 12ms
get forum data:
 4ms
get page messages:
 69ms
get tp. blocked users:
 2ms
others: 207ms
total:  673ms
x
x
Закрыть


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