Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]TAB CSS - bez JS
Forum PHP.pl > Forum > Przedszkole
casperii
15.03.2021, 21:34:26
Niby proste ale ... no właśnie eBay rządzi się swoimi prawami. Zależy mi na zrobieniu w szablonie 3 tabów ale tak żeby zapamiętał wybraną kartę.
Na chwilę obecną nie wczytuje domyślnej karty a także po wybraniu innej karty nie zaznacza tej która została wybrana.

Zabawa z JS oraz input + label odpada .

Poniżej kod: 
[HTML] pobierz, plaintext 
  1. <style>
  2. *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
  3. :after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
  4. a{color:#337ab7;text-decoration:none}
  5. a:focus,a:hover{color:#23527c;text-decoration:underline}
  6. a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
  7.  
  8. .nav{padding-left:0;margin-bottom:0;list-style:none}
  9. .nav>li{position:relative;display:block}
  10. .nav>li>a{position:relative;display:block;padding:10px 15px}
  11. .nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee}
  12. .nav>li.disabled>a{color:#777}
  13. .nav>li.disabled>a:focus,.nav>li.disabled>a:hover{color:#777;text-decoration:none;cursor:not-allowed;background-color:transparent}
  14.  
  15. .nav>li>a>img{max-width:none}
  16. .nav-tabs{}
  17. .nav-tabs>li{float:left; margin-bottom:-1px}
  18. .nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0}
  19. .nav-tabs>li>a:hover{border-color:#eee #eee #ddd}
  20. .nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}
  21. .tab-content>.tab-pane{display:none}
  22. .tab-content>.active{display:block}
  23.  
  24.  
  25. u{ text-decoration:underline;}
  26. li{ margin:0; padding:0; list-style:none;}
  27.  
  28.  
  29. .nav-tabs>li{ float:left;}
  30. .nav-tabs>li>a{ border-radius:0;}
  31. .nav-tabs>li>a:hover{ border-color:#eef0f2; background:#eef0f2;}
  32. .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{ border:1px solid #eef0f2; border-bottom:1px solid #fff;}
  33. .tab-content{ width:100%; float:left; border:1px solid #eef0f2; padding:15px; margin-top:-1px; margin-bottom:20px;}
  34.  
  35. .tab-pane {
  36. 	display:none;
  37. }
  38.  
  39. .tab-pane #content1 {
  40. 	display: block;
  41. }
  42.  
  43. .tab-pane:target ~ #content1 {
  44. 	display: none; 
  45. }
  46. .tab-content div:target {
  47. 	display: block; 
  48. }
  49. </style>
  50. </head>
  51. <body>
  52.  
  53. 	<ul class="nav nav-tabs">
  54. 		<li class="active"><a href="#content1">LINK1</a></li>
  55. 		<li><a href="#content2">LINK 2</a></li>
  56. 		<li><a href="#content3">LINK 3</a></li>
  57. 	</ul>
  58. 	<div class="tab-content">
  59. 		<div class="tab-pane" id="content1">
  60. 			pierwszy
  61. 		</div>
  62. 		<div class="tab-pane" id="content2">
  63. 			drugi
  64. 		</div>
  65. 		<div class="tab-pane" id="content3">
  66. 			trzeci
  67. 		</div>
  68. 	</div>
[HTML] pobierz, plaintext



z góry dzięki za jakąkolwiek pomoc smile.gif
trueblue
16.03.2021, 08:06:00
Te selektory nie mają sensu:

.tab-pane #content1
.tab-pane:target ~ #content1

LowiczakPL
16.03.2021, 08:07:32
Bez użycie HTMLa w HTMLu tego raczej nie zrobisz ponieważ ciężko będzie napisać kod w HTMLu bez używania HTMLa

To taby bez JS ale niestety z wykorzystaniem HTMLa Input i Label

https://cutcodedown.com/for_others/medium_a...outJS/tabs.html
trueblue
16.03.2021, 08:18:37
Cytat(LowiczakPL @ 16.03.2021, 08:07:32 ) *
Bez użycie HTMLa w HTMLu tego raczej nie zrobisz ponieważ ciężko będzie napisać kod w HTMLu bez używania HTMLa

Całe szczęście, bo autor nic nie wspominał o niemożności używania HTML.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.