Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Zakładki z nie działającym href
Forum PHP.pl > Forum > Po stronie przeglądarki
WoGuziczek
Witam!
Poniżej mam kod autorstwa Dynamic Drive DHTML, który służy do obsługi zakładek z zawartością JS.
Sprawa ogólnie działa świetnie, ALE...

Standardowo link do zakładki wygląda tak:
  1. <ul id="forumtabs" class="shadetabs">
  2. <li><a href="#" rel="tcontent1">Tab 1 Name</a></li>
  3. </ul>


Chciałbym zrobić tak, że gdy kliknę na jakąś zakładkę to oprócz uruchomienia jej - strona odświeży się z parametrem przeze mnie ustawionym.
Próbowałem tak:

  1. <ul id="forumtabs" class="shadetabs">
  2. <li><a href="index.php?langid=1" rel="tcontent1">Tab 1 Name</a></li>
  3. </ul>


NIC.

Napisałem prostą funkcję:
  1. <script type="text/javascript">
  2. <!--
  3. function wog_zakladka(id)
  4. {
  5. window.location = "index.php?landid="+ id +""
  6. }
  7. //-->


I wtedy zakładka:

  1. <ul id="forumtabs" class="shadetabs">
  2. <li><a href="javascript:wog_zakladka(1);" rel="tcontent1">Tab 1 Name</a></li>
  3. </ul>


Nie działa.... nic się nie dzieje.
Po usunięciu z linku do zakładki parametru rel - działa, no ale wtedy naturalnie nie działają zakładki.

Z poniższego kodu mógłby mi ktoś doradzić jak tu zrobić by działało to tak jakbym chciał?

Bardzo proszę i z góry dziękuję za pomoc.

Pozdrawiam

  1. function ddtabcontent(tabinterfaceid){
  2. this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
  3. this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
  4. this.enabletabpersistence=true
  5. this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
  6. this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
  7. this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
  8. this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
  9. this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
  10. }
  11.  
  12. ddtabcontent.getCookie=function(Name){
  13. var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
  14. if (document.cookie.match(re)) //if cookie found
  15. return document.cookie.match(re)[0].split("=")[1] //return its value
  16. return ""
  17. }
  18.  
  19. ddtabcontent.setCookie=function(name, value){
  20. document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
  21. }
  22.  
  23. ddtabcontent.prototype={
  24.  
  25. expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
  26. this.cancelautorun() //stop auto cycling of tabs (if running)
  27. var tabref=""
  28. try{
  29. if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
  30. tabref=document.getElementById(tabid_or_position)
  31. else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
  32. tabref=this.tabs[tabid_or_position]
  33. }
  34. catch(err){alert("Invalid Tab ID or position entered!")}
  35. if (tabref!="") //if a valid tab is found based on function parameter
  36. this.expandtab(tabref) //expand this tab
  37. },
  38.  
  39. cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
  40. if (dir=="next"){
  41. var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
  42. }
  43. else if (dir=="prev"){
  44. var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
  45. }
  46. if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
  47. this.cancelautorun() //stop auto cycling of tabs (if running)
  48. this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
  49. },
  50.  
  51. setpersist:function(bool){ //PUBLIC function to toggle persistence feature
  52. this.enabletabpersistence=bool
  53. },
  54.  
  55. setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
  56. this.selectedClassTarget=objstr || "link"
  57. },
  58.  
  59. getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
  60. return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
  61. },
  62.  
  63. urlparamselect:function(tabinterfaceid){
  64. var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL
  65. return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
  66. },
  67.  
  68. expandtab:function(tabref){
  69. var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
  70. //Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
  71. var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
  72. this.expandsubcontent(subcontentid)
  73. this.expandrevcontent(associatedrevids)
  74. for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
  75. this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
  76. }
  77. if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
  78. ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
  79. this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
  80. },
  81.  
  82. expandsubcontent:function(subcontentid){
  83. for (var i=0; i<this.subcontentids.length; i++){
  84. var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
  85. subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
  86. }
  87. },
  88.  
  89. expandrevcontent:function(associatedrevids){
  90. var allrevids=this.revcontentids
  91. for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
  92. //if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
  93. document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
  94. }
  95. },
  96.  
  97. setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
  98. for (var i=0; i<this.hottabspositions.length; i++){
  99. if (tabposition==this.hottabspositions[i]){
  100. this.currentTabIndex=i
  101. break
  102. }
  103. }
  104. },
  105.  
  106. autorun:function(){ //function to auto cycle through and select tabs based on a set interval
  107. this.cycleit('next', true)
  108. },
  109.  
  110. cancelautorun:function(){
  111. if (typeof this.autoruntimer!="undefined")
  112. clearInterval(this.autoruntimer)
  113. },
  114.  
  115. init:function(automodeperiod){
  116. var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
  117. var selectedtab=-1 //Currently selected tab index (-1 meaning none)
  118. var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
  119. this.automodeperiod=automodeperiod || 0
  120. for (var i=0; i<this.tabs.length; i++){
  121. this.tabs[i].tabposition=i //remember position of tab relative to its peers
  122. if (this.tabs[i].getAttribute("rel")){
  123. var tabinstance=this
  124. this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
  125. this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
  126. this.tabs[i].onclick=function(){
  127. tabinstance.expandtab(this)
  128. tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
  129. return false
  130. }
  131. if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
  132. this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))
  133. }
  134. if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
  135. selectedtab=i //Selected tab index, if found
  136. }
  137. }
  138. } //END for loop
  139. if (selectedtab!=-1) //if a valid default selected tab index is found
  140. this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
  141. else //if no valid default selected index found
  142. this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
  143. if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
  144. this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
  145. }
  146. } //END int() function
  147.  
  148. } //END Prototype assignment
EarthCitizen
Kod
<script type="text/javascript">
<!--
function wog_zakladka(id)
{
    // window.location = "index.php?landid="+ id +""
window.location = "index.php?landid="+ id;
}
//-->
</script>

w zakomentowanej linijce był błąd. Sprawdź teraz.
WoGuziczek
EarthCitizen, sprawdziłem.
Nie działa.

Funkcja, którą ja napisałem działała bez problemu na czystym html winksmiley.jpg
Ale mimo wszystko dziękuję.

Problem nie leży od tej strony.
W skrypcie zakładek, który podałem coś blokuje href.
EarthCitizen
A znajdź taki fragment
Kod
tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
return false

i dodaj swoją funkcję przed return false (tymczasowo bez argumentu id)
WoGuziczek
EarthCitizen... Twoje rozwiązanie nie przyniosło rezultatu, ale należą Ci się niezłe brawa, ponieważ naprowadziłeś mnie na tę blokadę.
To co chciałem działa jak należy gdy wywalę linijkę:
Kod
return false


Dziękuję winksmiley.jpg
EarthCitizen
No tak, chciałem trochę przekombinować z tą funkcją... swoją drogą to bardzo dziwne, że ona nie działa...
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.