I have a situation where I need to jump to a specific location from tab 1 to tab 2's certain section. Here is the sample of my code.
<pre>@{ <div id="tabs-1"><fieldset class="vs"><legend>tab1</legend> <a href="mypage/#tabs-2">click me 1</a> <p>click me 2</p> </fieldset></div> <div id="tabs-2"> <fieldset class="vs"><legend>tab2</legend> <p>test1 description</p> <ul> <li>This is a test
1.</li> </ul> <p>test2 description</p> <ul> <li>This is a test 2.</li> </ul> <p>test3 description</p> <ul> <li>This is a test 3.</li> </ul> <p>test4 description</p> <ul> <li>This is a test 4.</li> </ul> <p>test5 description</p> <ul> <li>This is a test 5.</li>
</ul> <p>test6 description</p> <ul> <li>This is a test 6.</li> </ul> <p>test7 description</p> <ul> <li>This is a test 7.</li> </ul> <p>test8 description</p> <ul> <li>This is a test 8.</li> </ul> <p>test9 description</p> <ul> <li>This is a test 9.</li> </ul>
<p>test10 description</p> <ul> <li>This is a test 10.</li> </ul> <p>test11 description</p> <ul> <li>This is a test 11.</li> </ul> <p>test12 description</p> <ul> <li>This is a test 12.</li> </ul> <p>test13 description</p> <ul> <li>This is a test 13.</li> </ul>
<p>test14 description</p> <ul> <li>This is a test 14.</li> </ul> </fieldset> </div> }
Now how do i click "Click me 1" and go to the "tabs-2" and scroll down to "test14 description"?
<div id="tabs-1">
<fieldset class="vs">
<legend>tab1</legend>
<a href="#tabs-2">click me 1</a>
<p>click me 2</p>
</fieldset>
</div>
<div id="tabs-2">
<fieldset class="vs">
<legend>tab2</legend>
<p>test1 description</p>
<ul> <li>This is a test 1.</li> </ul> <p>test2 description</p>
<ul> <li>This is a test 2.</li> </ul> <p>test3 description</p>
<ul> <li>This is a test 3.</li> </ul> <p>test4 description</p>
<ul> <li>This is a test 4.</li> </ul> <p>test5 description</p>
<ul> <li>This is a test 5.</li> </ul> <p>test6 description</p>
<ul> <li>This is a test 6.</li> </ul> <p>test7 description</p>
<ul> <li>This is a test 7.</li> </ul> <p>test8 description</p>
<ul> <li>This is a test 8.</li> </ul> <p>test9 description</p>
<ul> <li>This is a test 9.</li> </ul> <p>test10 description</p>
<ul> <li>This is a test 10.</li> </ul> <p>test11 description</p>
<ul> <li>This is a test 11.</li> </ul> <p>test12 description</p>
<ul> <li>This is a test 12.</li> </ul> <p>test13 description</p>
<ul> <li>This is a test 13.</li> </ul> <p>test14 description</p>
<ul> <li>This is a test 14.</li> </ul>
</fieldset>
</div>
We can go from one tab to another but how do we scroll to the particular section?
I even tried something like this.
<div id="tabs-1">
<fieldset class="vs">
<legend>tab1</legend>
<a href="#test14">click me 1</a>
<p>click me 2</p>
</fieldset>
</div>
<div id="tabs-2">
<fieldset class="vs">
<legend>tab2</legend>
<p>test1 description</p>
<ul> <li>This is a test 1.</li> </ul> <p>test2 description</p>
<ul> <li>This is a test 2.</li> </ul> <p>test3 description</p>
<ul> <li>This is a test 3.</li> </ul> <p>test4 description</p>
<ul> <li>This is a test 4.</li> </ul> <p>test5 description</p>
<ul> <li>This is a test 5.</li> </ul> <p>test6 description</p>
<ul> <li>This is a test 6.</li> </ul> <p>test7 description</p>
<ul> <li>This is a test 7.</li> </ul> <p>test8 description</p>
<ul> <li>This is a test 8.</li> </ul> <p>test9 description</p>
<ul> <li>This is a test 9.</li> </ul> <p>test10 description</p>
<ul> <li>This is a test 10.</li> </ul> <p>test11 description</p>
<ul> <li>This is a test 11.</li> </ul> <p>test12 description</p>
<ul> <li>This is a test 12.</li> </ul> <p>test13 description</p>
<ul> <li>This is a test 13.</li> </ul> <p>test14 description</p>
<ul> <li id="test14">This is a test 14.</li> </ul>
</fieldset>
</div>
But if i give href path to "test14", even tab change won't work.
<div id="tabs-1">
<fieldset class="vs">
<legend>tab1</legend>
<a href="#test14" class="scroll">click me 1</a>
<p>click me 2</p>
</fieldset>
</div>
<div id="tabs-2">
<fieldset class="vs">
<legend>tab2</legend>
<p>test1 description</p>
<ul> <li>This is a test 1.</li> </ul> <p>test2 description</p>
<ul> <li>This is a test 2.</li> </ul> <p>test3 description</p>
<ul> <li>This is a test 3.</li> </ul> <p>test4 description</p>
<ul> <li>This is a test 4.</li> </ul> <p>test5 description</p>
<ul> <li>This is a test 5.</li> </ul> <p>test6 description</p>
<ul> <li>This is a test 6.</li> </ul> <p>test7 description</p>
<ul> <li>This is a test 7.</li> </ul> <p>test8 description</p>
<ul> <li>This is a test 8.</li> </ul> <p>test9 description</p>
<ul> <li>This is a test 9.</li> </ul> <p>test10 description</p>
<ul> <li>This is a test 10.</li> </ul> <p>test11 description</p>
<ul> <li>This is a test 11.</li> </ul> <p>test12 description</p>
<ul> <li>This is a test 12.</li> </ul> <p>test13 description</p>
<ul> <li>This is a test 13.</li> </ul> <p>test14 description</p>
<ul> <li id="test14">This is a test 14.</li> </ul>
</fieldset>
</div>
<div style="height:1200px"></div>
Member
17 Points
143 Posts
need to scroll to the specific location of the tab from different tab in webpage
Feb 13, 2017 06:06 PM|SuchiSayami|LINK
Hello,
I have a situation where I need to jump to a specific location from tab 1 to tab 2's certain section. Here is the sample of my code.
<pre>@{ <div id="tabs-1"><fieldset class="vs"><legend>tab1</legend> <a href="mypage/#tabs-2">click me 1</a> <p>click me 2</p> </fieldset></div> <div id="tabs-2"> <fieldset class="vs"><legend>tab2</legend> <p>test1 description</p> <ul> <li>This is a test 1.</li> </ul> <p>test2 description</p> <ul> <li>This is a test 2.</li> </ul> <p>test3 description</p> <ul> <li>This is a test 3.</li> </ul> <p>test4 description</p> <ul> <li>This is a test 4.</li> </ul> <p>test5 description</p> <ul> <li>This is a test 5.</li> </ul> <p>test6 description</p> <ul> <li>This is a test 6.</li> </ul> <p>test7 description</p> <ul> <li>This is a test 7.</li> </ul> <p>test8 description</p> <ul> <li>This is a test 8.</li> </ul> <p>test9 description</p> <ul> <li>This is a test 9.</li> </ul> <p>test10 description</p> <ul> <li>This is a test 10.</li> </ul> <p>test11 description</p> <ul> <li>This is a test 11.</li> </ul> <p>test12 description</p> <ul> <li>This is a test 12.</li> </ul> <p>test13 description</p> <ul> <li>This is a test 13.</li> </ul> <p>test14 description</p> <ul> <li>This is a test 14.</li> </ul> </fieldset> </div> }
Now how do i click "Click me 1" and go to the "tabs-2" and scroll down to "test14 description"?
All-Star
17642 Points
3510 Posts
Re: need to scroll to the specific location of the tab from different tab in webpage
Feb 14, 2017 07:01 AM|Chris Zhao|LINK
Hi Suchita,
<div id="tabs-1"> <fieldset class="vs"> <legend>tab1</legend> <a href="#tabs-2">click me 1</a> <p>click me 2</p> </fieldset> </div> <div id="tabs-2"> <fieldset class="vs"> <legend>tab2</legend> <p>test1 description</p> <ul> <li>This is a test 1.</li> </ul> <p>test2 description</p> <ul> <li>This is a test 2.</li> </ul> <p>test3 description</p> <ul> <li>This is a test 3.</li> </ul> <p>test4 description</p> <ul> <li>This is a test 4.</li> </ul> <p>test5 description</p> <ul> <li>This is a test 5.</li> </ul> <p>test6 description</p> <ul> <li>This is a test 6.</li> </ul> <p>test7 description</p> <ul> <li>This is a test 7.</li> </ul> <p>test8 description</p> <ul> <li>This is a test 8.</li> </ul> <p>test9 description</p> <ul> <li>This is a test 9.</li> </ul> <p>test10 description</p> <ul> <li>This is a test 10.</li> </ul> <p>test11 description</p> <ul> <li>This is a test 11.</li> </ul> <p>test12 description</p> <ul> <li>This is a test 12.</li> </ul> <p>test13 description</p> <ul> <li>This is a test 13.</li> </ul> <p>test14 description</p> <ul> <li>This is a test 14.</li> </ul> </fieldset> </div>Best Regards,
Chris
Member
17 Points
143 Posts
Re: need to scroll to the specific location of the tab from different tab in webpage
Feb 14, 2017 01:48 PM|SuchiSayami|LINK
We can go from one tab to another but how do we scroll to the particular section?
I even tried something like this.
<div id="tabs-1"> <fieldset class="vs"> <legend>tab1</legend> <a href="#test14">click me 1</a> <p>click me 2</p> </fieldset> </div> <div id="tabs-2"> <fieldset class="vs"> <legend>tab2</legend> <p>test1 description</p> <ul> <li>This is a test 1.</li> </ul> <p>test2 description</p> <ul> <li>This is a test 2.</li> </ul> <p>test3 description</p> <ul> <li>This is a test 3.</li> </ul> <p>test4 description</p> <ul> <li>This is a test 4.</li> </ul> <p>test5 description</p> <ul> <li>This is a test 5.</li> </ul> <p>test6 description</p> <ul> <li>This is a test 6.</li> </ul> <p>test7 description</p> <ul> <li>This is a test 7.</li> </ul> <p>test8 description</p> <ul> <li>This is a test 8.</li> </ul> <p>test9 description</p> <ul> <li>This is a test 9.</li> </ul> <p>test10 description</p> <ul> <li>This is a test 10.</li> </ul> <p>test11 description</p> <ul> <li>This is a test 11.</li> </ul> <p>test12 description</p> <ul> <li>This is a test 12.</li> </ul> <p>test13 description</p> <ul> <li>This is a test 13.</li> </ul> <p>test14 description</p> <ul> <li id="test14">This is a test 14.</li> </ul> </fieldset> </div>But if i give href path to "test14", even tab change won't work.
All-Star
17642 Points
3510 Posts
Re: need to scroll to the specific location of the tab from different tab in webpage
Feb 15, 2017 08:09 AM|Chris Zhao|LINK
Hi Suchita,
<div id="tabs-1"> <fieldset class="vs"> <legend>tab1</legend> <a href="#test14" class="scroll">click me 1</a> <p>click me 2</p> </fieldset> </div> <div id="tabs-2"> <fieldset class="vs"> <legend>tab2</legend> <p>test1 description</p> <ul> <li>This is a test 1.</li> </ul> <p>test2 description</p> <ul> <li>This is a test 2.</li> </ul> <p>test3 description</p> <ul> <li>This is a test 3.</li> </ul> <p>test4 description</p> <ul> <li>This is a test 4.</li> </ul> <p>test5 description</p> <ul> <li>This is a test 5.</li> </ul> <p>test6 description</p> <ul> <li>This is a test 6.</li> </ul> <p>test7 description</p> <ul> <li>This is a test 7.</li> </ul> <p>test8 description</p> <ul> <li>This is a test 8.</li> </ul> <p>test9 description</p> <ul> <li>This is a test 9.</li> </ul> <p>test10 description</p> <ul> <li>This is a test 10.</li> </ul> <p>test11 description</p> <ul> <li>This is a test 11.</li> </ul> <p>test12 description</p> <ul> <li>This is a test 12.</li> </ul> <p>test13 description</p> <ul> <li>This is a test 13.</li> </ul> <p>test14 description</p> <ul> <li id="test14">This is a test 14.</li> </ul> </fieldset> </div> <div style="height:1200px"></div>Best Regards,
Chris