Results 1 to 5 of 5

Thread: Can't trigger jscript tab from html anchor link

  1. #1
    Join Date
    May 2016
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Can't trigger jscript tab from html anchor link

    Hello!

    I'm trying to do something that should be very simple, but I can't figure out and it's driving nuts!

    I'm simply trying to call tab2 from a text link within tab1. Here is an example that does what I want. To see what I want to do, simply click on "open third tab":
    http://jquerytools.github.io/demos/tabs/anchors.html

    Here you can see the test page I've been playing my actual script:
    http://justusedmedicalequipment.com/Used_Medical_Equipment/Experimenting

    Click between the tabs and note the behavior. Then, while viewing the Product Description tab, click the link below the blue ribbon image ("Click Me").

    I'm able to trigger the second tab, I just can't get it to show as current.

    Here is my href from below the image:
    <a href="javascript:void(0)" onclick="expandcontent('sc2', this)"><span>Click Me!</span></a>

    What am I doing wrong?

    Thanks!
    Last edited by Beverleyh; 05-26-2016 at 06:04 PM.

  2. #2
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    You have replaced the anchor names in the example with "javascript:void(0)". In lines 447 & 448, 'this' in the JavaScript calls refer to the appropriate <li> elements inside the "slidetabsmenu", so it works. However in line 464, 'this' refers to the surrounding <td> element which isn't a tab. You need to follow the example page and name the tabs, then use the correct tab name in the JavaScript call in line 464.

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    A part from what styxlawyer observes in post #2, wouldn't it be better to use the following code instead of http://jquerytools.github.io/demos/tabs/anchors.html?
    Code:
    <!doctype html>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hashchange</title>
    </head>
    
    <body>
    <a href="#panel1" >Load panel 1</a>
    <a href="#panel2" >Load panel 2</a>
    <a href="#panel3" >Load panel 3</a>
    
    <div id="tab_content" style="padding:10px; position: relative; border: 1px solid black; width: 500px; height: 300px; overflow: auto"></div>
    <script>
    function hash_change()
    {
    document.getElementById('tab_content').innerHTML=document.getElementById(location.hash.substring(1,location.hash.length)).innerHTML
    }
    window.onhashchange=hash_change;
    if(window.location.hash=='')window.location.replace('#panel1')
    </script>
    
    <div style="position: absolute; display: none">
    
    <div id="panel1">
    <span style="color: white; background: red">This is panel 1</span><br>
    <a href="#panel1" >Load panel 1</a>
    <a href="#panel2" >Load panel 2</a>
    <a href="#panel3" >Load panel 3</a>
    </div>
    
    <div id="panel2">
    <span style="color: red; background: #dedede">This is panel 2</span><br>
    <a href="#panel1" >Load panel 1</a>
    <a href="#panel2" >Load panel 2</a>
    <a href="#panel3" >Load panel 3</a>
    </div>
    
    <div id="panel3">
    <span style="color: white; background: blue">This is panel 3</span><br>
    <a href="#panel1" >Load panel 1</a>
    <a href="#panel2" >Load panel 2</a>
    <a href="#panel3" >Load panel 3</a>
    </div>
    
    </div>
    
    <script>
    document.getElementById('tab_content').innerHTML=document.getElementById(location.hash.substring(1,location.hash.length)).innerHTML
    </script>
    
    </body>
    </html>
    It allows you to bookmark the different panels.
    Last edited by molendijk; 05-26-2016 at 10:56 PM. Reason: typo

  4. #4
    Join Date
    May 2016
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the input!

    Styxlawyer, I think you're on the right track. I just can't figure out the correct way to do that. I just tried this:
    <a href="javascript:void(0)" onclick="expandcontent('sc2', document.getElementById('sc2'))"><span>mc12345678</span></a>

    Sorry, molendijk, I now realize that the jquerytools link was missleading. That was just a working example of what I'm trying to do. The actual JS I'm using is an "off-the-shelf" script... cuz I'm way too dumb to figure out how to write my own script!

    Here is my actual script:
    Code:
    /***********************************************
    * DD Tab Menu II script- � Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //Set tab to intially be selected when page loads:
    //[which tab (1=first tab), ID of tab content to display]:
    var initialtab=[1, "sc1"]
    
    //Turn menu into single level image tabs (completely hides 2nd level)?
    var turntosingle=0 //0 for no (default), 1 for yes
    
    //Disable hyperlinks in 1st level tab images?
    var disabletablinks=0 //0 for no (default), 1 for yes
    
    ////////Stop editting////////////////
    
    var previoustab=""
    
    if (turntosingle==1)
    document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')
    
    function expandcontent(cid, aobject){
    if (disabletablinks==1)
    aobject.onclick=new Function("return false")
    if (document.getElementById && turntosingle==0){
    highlighttab(aobject)
    if (previoustab!="")
    document.getElementById(previoustab).style.display="none"
    document.getElementById(cid).style.display="block"
    previoustab=cid
    }
    }
    
    function highlighttab(aobject){
    if (typeof tabobjlinks=="undefined")
    collectddimagetabs()
    for (i=0; i<tabobjlinks.length; i++)
    tabobjlinks[i].className=""
    if (aobject != null)
     {
      aobject.className="current"
     }
    }
    
    function collectddimagetabs(){
    var tabobj=document.getElementById("slidetabsmenu")
    tabobjlinks=tabobj.getElementsByTagName("a")
    }
    
    
    function do_onload(){
    if (document.getElementById("slidetabsmenu") != null)
    {
    collectddimagetabs()
    expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
    }
    //do_tabmagic()
    //ShowTabs()
    }
    
    function do_tabmagic() {
    	
    	
    	//Hack for Attribs to be default checked
    	var attribcontainer = document.getElementById('productAttributes_tab')
    	if (attribcontainer != undefined) {
    		var attritems = attribcontainer.getElementsByTagName("input");
    	}
    	if (attritems != undefined) {
    		for (var n = 0; n<attritems.length; n++){
    			if (attritems[n].getAttribute('checked') == "checked") {
    			  attritems[n].checked=true;
    			}
    		}	
    	}
    	// Hide real versions and remove _tab suffix to replace real versions.
    	var tabmain= document.getElementById('tabcontentcontainer')
    	if (tabmain != undefined) {
    		var tabContainer= tabmain.getElementsByTagName("*");
    	}
    	var productDetails= document.getElementById('productDetailsList');
    	var productDetailstab= document.getElementById('productDetailsList_tab');
    	if (tabContainer != undefined) {
    		var hackArr = new Array();
    		var NewArr = new Array();
    		
    		hackArr[0] = document.getElementById('cartAdd');
    		hackArr[1] = document.getElementById('productDetailsList');
    		hackArr[2] = document.getElementById('productAttributes');
    		hackArr[3] = document.getElementById('productQuantityDiscounts');
    		hackArr[4] = document.getElementById('productAdditionalImages');
    		hackArr[5] = document.getElementById('alsoPurchased');
    		hackArr[6] = document.getElementById('crossSell');
    		hackArr[7] = document.getElementById('reviewsDefault');
    		hackArr[8] = document.getElementById('productDescription');
    		hackArr[9] = document.getElementById('attribsOptionsText');
    		hackArr[10] = document.getElementById('productMainImage');
    		hackArr[11] = document.getElementById('productName');
    		hackArr[12] = document.getElementById('productPrices');
    		hackArr[13] = document.getElementById('freeShippingIcon');
    		
    		NewArr[0] = document.getElementById('cartAdd_tab');
    		NewArr[1]  = document.getElementById('productDetailsList_tab');
    		NewArr[2] = document.getElementById('productAttributes_tab');
    		NewArr[3]  = document.getElementById('productQuantityDiscounts_tab');
    		NewArr[4]  = document.getElementById('productAdditionalImages_tab');
    		NewArr[5] = document.getElementById('alsoPurchased_tab');
    		NewArr[6] = document.getElementById('crossSell_tab');
    		NewArr[7]  = document.getElementById('reviewsDefault_tab');
    		NewArr[8]  = document.getElementById('productDescription_tab');
    		NewArr[9]  = document.getElementById('attribsOptionsText_tab');
    		NewArr[10] = document.getElementById('productMainImage_tab');
    		NewArr[11] = document.getElementById('productName_tab');
    		NewArr[12] = document.getElementById('productPrices_tab');
    		NewArr[13] = document.getElementById('freeShippingIcon_tab');
    		
    
    		for (var j = 0; j<hackArr.length; j++){
    			if (hackArr[j] != undefined) {
    				 for (var i = 0; i<tabContainer.length; i++){
    				 sTmp = tabContainer[i].id.split("_");
    					 if(hackArr[j].id == sTmp[0]) {
    						////alert(sTmp[0] + '(' + j + ') = ' + hackArr[j].id + '(' + j + ')');
    						////alert(hackArr[j].innerHTML);
    						 hackArr[j].style.display="none";
    						 hackArr[j].innerHTML='';
    						 hackArr[j].outerHTML='';
    						 break;
    					 }
    				 }	
    			}
    		}
    
    		if (hackArr[8] != undefined) {
    			hackArr[8].style.display="none";
    		}				
    
    		for (var j = 0; j<NewArr.length; j++){
    			if (NewArr[j] != undefined) {
    				for (var i = 0; i<tabContainer.length; i++){
    					if(tabContainer[i].id == NewArr[j].id)  {
    						sTmp = NewArr[j].id.split("_");
    						NewArr[j].id=sTmp[0];
    						break;
    					}
    				}	
    			}
    		}
    	}
    	
    	
    }
    
    function ShowTabs() {
    	var tppblock = document.getElementById('tpptabBlock')
    	if (tppblock != undefined) {
    		tppblock.style.display = 'block';
    	}
    }
    
    if (window.addEventListener)
    window.addEventListener("load", do_onload, false)
    else if (window.attachEvent)
    window.attachEvent("onload", do_onload)
    else if (document.getElementById)
    window.onload=do_onload

  5. #5
    Join Date
    May 2016
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Solution found. This call does the trick:
    Code:
    <a href="javascript:void(0)" onclick="expandcontent('sc2', document.getElementById('slidetabsmenu').getElementsByTagName('a')[1])"><span>Click Me!</span></a>
    Last edited by jscheuer1; 05-27-2016 at 05:01 PM. Reason: format code

Similar Threads

  1. Replies: 2
    Last Post: 10-11-2010, 05:26 AM
  2. HTML anchor link?
    By Jaxbuild in forum HTML
    Replies: 2
    Last Post: 02-13-2009, 10:40 AM
  3. need help with Js and html anchor tags
    By turkiyem.fm in forum JavaScript
    Replies: 3
    Last Post: 01-21-2009, 03:54 PM
  4. dd tabs with anchor link
    By lew9e in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-13-2008, 04:20 AM
  5. Can I use an F-key as a trigger or link?
    By marker2001 in forum JavaScript
    Replies: 11
    Last Post: 12-15-2007, 06:13 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •