How to select the second tab in a section on a page?
Hi there--
I want to select the second tab in a section of a page. I'm using Tab Content Script (v 2.2). The method instance.expandit(tabid_or_position) would seem to work. However, I'm having a hard time figuring out how to select the second tab in a section of a page.
Here's my code:
Hope you could help me with this. Thanks!HTML Code:<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="tabcontent.css" /> <script type="text/javascript" src="tabcontent.js"> /*********************************************** * Tab Content script v2.2- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Please keep this notice intact * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ </script> </head> <body> <ul class="nav navbar-nav"> <li style="float:left; list-style: none; margin: 10px;" class="active"><a href="#demo1">Demo 1</a></li> <li style="float:left; list-style: none; margin: 10px;"><a href="#demo2">Demo 2</a></li> <li style="float:left; list-style: none; margin: 10px;"><a href="#demo3">Demo 3</a></li> </ul> <br> <br> <br> <b><a href="javascript: myservices.expandit('myfavorite')">I want to select the tab with id="myfavorite" in a section of this page</a></b> <h3>Demo #1- Basic implementation</h3> <section id="demo1"> <ul id="countrytabs" class="shadetabs"> <li><a href="#" rel="country1" class="selected">Tab 1</a></li> <li><a href="#" rel="country2">Tab 2</a></li> <li><a href="#" rel="country3">Tab 3</a></li> <li><a href="#" rel="country4">Tab 4</a></li> <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li> </ul> <div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px"> <div id="country1" class="tabcontent"> Tab content 1 here<br />Tab content 1 here<br /> </div> <div id="country2" class="tabcontent"> Tab content 2 here<br />Tab content 2 here<br /> </div> <div id="country3" class="tabcontent"> Tab content 3 here<br />Tab content 3 here<br /> </div> <div id="country4" class="tabcontent"> Tab content 4 here<br />Tab content 4 here<br /> </div> </div> <script type="text/javascript"> var countries=new ddtabcontent("countrytabs") countries.setpersist(true) countries.setselectedClassTarget("link") //"link" or "linkparent" countries.init() </script> <p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a></p> </section> <hr style="height: 500px; border: none;" /> <section id="demo2"> <h3>Demo #2- Different Tab Style, expanding of arbitrary DIVs on the page enabled</h3> <div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white"> Arbitrary DIV 1 </div> <div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white"> Arbitrary DIV 2 </div> <div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white"> Arbitrary DIV 3 </div> <div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px"> <div id="tcontent1" class="tabcontent"> Tab content 1 here<br />Tab content 1 here<br /> </div> <div id="tcontent2" class="tabcontent"> Tab content 2 here<br />Tab content 2 here<br /> </div> <div id="tcontent3" class="tabcontent"> Tab content 3 here<br />Tab content 3 here<br /> </div> <div id="tcontent4" class="tabcontent"> Tab content 4 here<br />Tab content 4 here<br /> </div> </div> <div id="flowertabs" class="modernbricksmenu2"> <ul> <li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li> <li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li> <li><a href="#" rel="tcontent3">Tab 3</a></li> <li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li> <li><a href="http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm">Tab Content</a></li> </ul> </div> <br style="clear: left" /> <script type="text/javascript"> var myflowers=new ddtabcontent("flowertabs") myflowers.setpersist(true) myflowers.setselectedClassTarget("link") //"link" or "linkparent" myflowers.init() </script> <p><b><a href="javascript: myflowers.expandit(2)">Click here to select 3rd tab</a></b></p> <p><b><a href="current.htm?flowertabs=1">Reload page and select 2nd tab using URL parameter</a></b></p> </section> <hr style="height: 500px; border: none;" /> <section id="demo3"> <h3>Demo #3- Different Tab Style, "slideshow mode" enabled</h3> <div id="services" class="indentmenu"> <ul> <li><a href="#" rel="tab1" class="selected">Tab 1</a></li> <li><a href="#" rel="tab2">Tab 2</a></li> <li><a href="#" rel="tab3">Tab 3</a></li> <li><a href="#" rel="tab4" id="myfavorite">Tab 4</a></li> <li><a href="http://www.google.com">Google</a></li> </ul> <br style="clear: left" /> </div> <div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em"> <div id="tab1" class="tabcontent"> Tab content 1 here<br />Tab content 1 here<br /> <p><b><a href="javascript: myservices.expandit('myfavorite')">Click here to select tab with id="myfavorite"</a></b></p> </div> <div id="tab2" class="tabcontent"> Tab content 2 here<br />Tab content 2 here<br /> </div> <div id="tab3" class="tabcontent"> Tab content 3 here<br />Tab content 3 here<br /> </div> <div id="tab4" class="tabcontent"> Tab content 4 here<br />Tab content 4 here<br /> </div> </div> <script type="text/javascript"> var myservices=new ddtabcontent("services") myservices.setpersist(true) myservices.setselectedClassTarget("link") myservices.init(2000) </script> </section> <hr style="height: 500px; border: none;" /> </body> </html>
CSS Codes
Reply With Quote
Bookmarks