Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript] Zakładki Newsów, oddziaływanie na siebie
BlackHat
post 1.03.2010, 10:25:28
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 9.02.2010

Ostrzeżenie: (0%)
-----

Witam,
Mam do wykonania stworzenie menu newsów w js.
Mam dwie zakładki górna:
Nowe | Najpopularniejsze |artykuł dnia
i dolną:
1 | 2 | 3
Mam problem z połączeniem tych dwóch tabów, ażeby w momencie gdy kliknę Najpopularniejsze, dolny tab zmienił wartość 1 | 2 | 3 na divy które są w najpopularniejszych, a nie wyświetlał cały czas tego samego z zakładki nowe.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <style type="text/css">
  8. body {font-family:Verdana, Arial, Helvetica, sans-serif;}
  9. .tab-box { 
  10.  
  11.            width:400x;
  12.   border-bottom: 1px solid #DDD;
  13.   padding-bottom:5px;
  14. }
  15. .tab-box a {
  16.  
  17.   border:1px solid #DDD;
  18.   color:#666666;
  19.   padding: 5px 15px;
  20.   text-decoration:none;
  21.   background-color: #D0E7E0;
  22. }
  23. .tab-box a.activeLink { 
  24.  
  25.   background-color: #7EDAC0; 
  26.   border-bottom: 0; 
  27.   padding: 6px 15px;
  28. }  
  29. .tabcontent { 
  30.  
  31.  border: 1px solid #ddd;
  32.  border-top: 0;
  33.   padding: 15px;
  34.   background-color:#DDF3DE;
  35. }
  36. .hide { display: none;}
  37.  
  38. .small { color: #999; margin-top: 100px; border: 1px solid #EEE; padding: 5px; font-size: 9px; font-family:Verdana, Arial, Helvetica, sans-serif; }
  39. .tab-box-bottom { 
  40.  
  41.            width:400x;
  42.   border-bottom: 1px solid #DDD;
  43.   padding-bottom:50px;
  44. }
  45. .tab-box-bottom a {
  46.  
  47.   border:1px solid #DDD;
  48.   color:#666666;
  49.   padding: 5px 50px;
  50.   text-decoration:none;
  51.   background-color: #D0E7E0;
  52. }
  53. .tab-box-bottom a.activeLink { 
  54.  
  55.   background-color: #7EDAC0; 
  56.   border-bottom: 0; 
  57.   padding: 6px 50px;
  58. }  
  59. </style>
  60.  
  61. <script type="text/javascript">
  62.   $(document).ready(function() {
  63.     $(".tabLink").each(function(){
  64.       $(this).click(function(){
  65.         tabeId = $(this).attr('id');
  66.  
  67.         $(".tabLink").removeClass("activeLink");
  68.         $(this).addClass("activeLink");
  69.         $(".tabcontent").addClass("hide");
  70.         $("#"+tabeId+"-1").removeClass("hide");   
  71.  
  72.  
  73.         return false;	  
  74.       });
  75.     });  
  76.   });
  77. </script>
  78.  
  79. </head>
  80.  
  81. <body>
  82.  
  83.  <div class="tab-box" style="width:400px"> 
  84.     <a href="java script:;" class="tabLink activeLink" id="cont-1">Nowe</a> 
  85.     <a href="java script:;" class="tabLink " id="cont-2">Najpopularniejsze</a> 
  86.     <a href="java script:;" class="tabLink " id="cont-3">Artykul dnia</a> 
  87.   </div>
  88.  
  89.   <div class="tabcontent" id="cont-1-1" style="width:400px"> 
  90.     NOWE 1
  91.   </div>
  92.  
  93.   <div class="tabcontent hide" id="cont-2-1"style="width:400px"> 
  94.     Najpopularniejsze 1
  95.   </div> 
  96.  
  97.   <div class="tabcontent hide" id="cont-3-1"style="width:400px"> 
  98.     Artykul dnia 
  99.   </div> 
  100.   <div class="tabcontent hide" id="cont-4-1" style="width:400px"> 
  101.      NOWE 2
  102.        </div>
  103.   <div class="tabcontent hide" id="cont-5-1" style="width:400px"> 
  104.   NOWE 3
  105.   </div>
  106.   <div class="tabcontent hide" id="cont-6-1"style="width:400px"> 
  107.     Najpopularniejsze 2
  108.   </div> 
  109.  <script type="text/javascript">
  110.   $(document).ready(function() {
  111.     $(".tab-box-bottom").each(function(){
  112.       $(this).click(function(){
  113.         tabeId2 = $(this).attr('id2');
  114.  
  115.         $(".tab-box-bottom").removeClass("activeLink");
  116.         $(this).addClass("activeLink");
  117.         $(".tab-box-bottom").addClass("hide");
  118.         $("#"+tabeId2+"-1").removeClass("hide");   
  119.  
  120.  
  121.         return false;	  
  122.       });
  123.     });  
  124.   });
  125. </script>
  126.   <div class="tab-box-bottom activeLink" id2="con-1" style="width:400px"> 
  127.     <a href="java script:;" class="tabLink activeLink" id="cont-1">1</a> 
  128.     <a href="java script:;" class="tabLink " id="cont-4">2</a> 
  129.     <a href="java script:;" class="tabLink " id="cont-5">3</a> 
  130.   </div>  <div class="tab-box-bottom hide" id2="con-2" style="width:400px"> 
  131.     <a href="java script:;" class="tabLink activeLink" id="cont-2">1</a> 
  132.     <a href="java script:;" class="tabLink " id="cont-6">2</a> 
  133.     <a href="java script:;" class="tabLink " id="cont-7">3</a> 
  134.   </div> 
  135.  
  136.  
  137.  
  138. </body>
  139. </html>
[HTML] pobierz, plaintext

Dziękuję za wszelkie sugestie,
Pozdrawiam,
BlackHat
Go to the top of the page
+Quote Post

Posty w temacie
- BlackHat   [JavaScript] Zakładki Newsów   1.03.2010, 10:25:28
- - erix   Eeee, a po co tyle identyfikatorów? Masz taką fa...   1.03.2010, 15:28:13

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.07.2025 - 21:09
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn