5 Replies - 1322 Views - Last Post: 29 January 2013 - 04:52 AM

#1 kukuviza  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 08-August 12

Trouble with tabs and anchors (jquery)

Posted 29 January 2013 - 02:48 AM

Hello,
I have this strange behaviour when I click on an anchor that should take me in a point of the same tab.
I get to the correct point but all the tabs disappear. The tabs have normal tab code, work fine except for this problem.
Is This A Good Question/Topic? 0
  • +

Replies To: Trouble with tabs and anchors (jquery)

#2 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 408
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: Trouble with tabs and anchors (jquery)

Posted 29 January 2013 - 02:52 AM

Can you please post the code that you have tried for this...it will enable us to understand your problem better.

regards,
Raghav
Was This Post Helpful? 0
  • +
  • -

#3 kukuviza  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 08-August 12

Re: Trouble with tabs and anchors (jquery)

Posted 29 January 2013 - 03:11 AM

<div id="tabs" class="tabbed">
    <ul style="padding-left: 20px">
        <li><a href="#tabs-1">menu 1</a></li>
        <li><a href="#tabs-2">menu 2</a></li>
        <li><a href="#tabs-3">menu 3</a></li>
        <li><a href="#tabs-4">menu 4</a></li>
        <li><a href="#tabs-5">menu 5</a></li>
    </ul>
    <div id="tabs-1">
bla bka bla
<

This post has been edited by Dormilich: 04 February 2013 - 02:23 AM
Reason for edit:: please use [code] [/code] tags when posting code

Was This Post Helpful? 0
  • +
  • -

#4 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 408
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: Trouble with tabs and anchors (jquery)

Posted 29 January 2013 - 03:44 AM

Ok, can you please provide the CSS for your class tabbed?...and this time, please close the [/CODE] tags.

regards,
Raghav

This post has been edited by raghav.naganathan: 29 January 2013 - 03:45 AM

Was This Post Helpful? 0
  • +
  • -

#5 kukuviza  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 08-August 12

Re: Trouble with tabs and anchors (jquery)

Posted 29 January 2013 - 03:56 AM

div id="tabs" class="tabbed">
    <ul style="padding-left: 20px">
        <li><a href="#tabs-1">menu 1</a></li>
        <li><a href="#tabs-2">menu 2</a></li>
        <li><a href="#tabs-3">menu 3</a></li>
        <li><a href="#tabs-4">menu 4</a></li>
        <li><a href="#tabs-5">menu 5</a></li>
    </ul>
    <div id="tabs-1">
           lorem ipsum
    </div>
   <div id="tabs-2">
    lorem ipsum <a href="#privacy">Privacy Policy</a>,lorem ipsum 
    <a name="privacy"> bla bla bla
   </div>
    ....
    other tabs
    .....
</div>



and of course I have
 $(document).ready(function () {
            $("#tabs").tabs();
 });
 

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2886
  • View blog
  • Posts: 9,589
  • Joined: 12-December 12

Re: Trouble with tabs and anchors (jquery)

Posted 29 January 2013 - 04:52 AM

When you click the anchor-links there is no Javascript or jQuery involved; they simply jump to the relevant id-location in the page. You need to investigate the jQuery tabs-API and replace the links with on-click events that use this API to activate the relevant tab.

Assuming it is this plug-in:
http://docs.jquery.com/UI/API/1.8/Tabs
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1