Results 1 to 2 of 2

Thread: How to select the second tab in a section on a page?

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

    Smile 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:
    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>
    Hope you could help me with this. Thanks!

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    The count starts from zero so the second tab would be 1. Otherwise use the ID method and reference it directly.

    From the demo page;
    Code:
    <!--Selects 2nd tab within Tab instance "myflowers" -->
    <a href="javascript:myflowers.expandit(1)">Select 2nd Tab</a>
    
    <!--Selects tab with ID="roses" within Tab instance "myflowers" -->
    <!--Be sure to first insert ID="roses" inside the target tab's link element.
    <a href="javascript:myflowers.expandit('roses')">Select "Roses" tab</a>
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. Links for each section of a page
    By Terrym in forum HTML
    Replies: 1
    Last Post: 01-31-2014, 12:00 AM
  2. Open link in a section of same page
    By Jamcan in forum HTML
    Replies: 4
    Last Post: 11-12-2012, 01:38 PM
  3. Printing a section of Web page Only
    By matrixbegins in forum JavaScript
    Replies: 1
    Last Post: 10-06-2008, 12:26 PM
  4. Printing a section of a page
    By Scrounger in forum Looking for such a script or service
    Replies: 5
    Last Post: 01-16-2008, 07:53 AM
  5. Blog section , Forums section - business
    By deepakdeep in forum Graphics
    Replies: 0
    Last Post: 11-25-2006, 10:21 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
  •