Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Zakładki Newsów
Forum PHP.pl > Forum > Przedszkole
BlackHat
1.03.2010, 10:25:28
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
erix
1.03.2010, 15:28:13
Eeee, a po co tyle identyfikatorów? winksmiley.jpg

Masz taką fajną metodę eq(), to patrz:
[HTML] pobierz, plaintext 
  1. <div id="switchers">
  2. <a href="" class="active">asdasd</a>
  3. <a href="">asdasd</a>
  4. <a href="">asdasd</a></div>
  5.  
  6. <div id="content">
  7. <div class="active">asdasd</div>
  8. <div>asdasd</div>
  9. <div>asdasd</div>
  10. </div>
[HTML] pobierz, plaintext


Ukrywanie początkowe sobie zrobisz.

To wystarczy dosłownie kilka linijek:
[JAVASCRIPT] pobierz, plaintext 
  1. $(function(){
  2.  
  3.     switchers = $('#switchers a');
  4.  
  5.     switchers
  6.         .removeClass('active')
  7.         .click(function(e){
  8.             $('#content div')
  9.                 .removeClass('active')
  10.                 .eq(switchers.index(this))
  11.                 .addClass('active');
  12.  
  13.             $(this).addClass('active');
  14.  
  15.             e.preventDefault();
  16.         }
  17.  
  18. });
[JAVASCRIPT] pobierz, plaintext
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.