Anchor linking problem in tabbed content area

[tinggg]

Hi

I initially posted this in the html forum but was advised that 'You would have to use JavaScript to show the relevant tab first.'

On one of my pages I have a 3 tab box {fragment 1,2 & 3) in the content area. I want to link from from linked text on tab 1 (#1)to an anchor (1) on some content in tab 2 I tried anchor linking but it didn't work.

Any ideas?

I thought this would be easy but after trying lots I can't get it to work - I think its because its almost like i'm trying to link to an anchor in an area (tab) defined by an anchor if that makes sense.

Many thanks for your help.
T

<%@ Page Language="C#" MasterPageFile="~/masters/content-page.master" %>

<asp:Content ContentPlaceHolderID="PageTitle" ID="PageTitle" runat="server"><!-- InstanceBeginEditable name="doctitle" -->
<title>Review of Rules 2008</title>
<!-- InstanceEndEditable --></asp:Content>

<asp:Content ContentPlaceHolderID="Head" ID="Head" runat="server"><!-- InstanceBeginEditable name="head" -->
<link rel="stylesheet" href="/css/tabs.css" type="text/css" />
  <script type="text/javascript" src="/javascript/jquery-1.2.4b.js"></script>
  <script type="text/javascript" src="/javascript/ui.core.js"></script>
  <script type="text/javascript" src="/javascript/ui.tabs.js"></script>
  <script type="text/javascript">
    /* Fix for IE6 background-image flicker
     * See [URL unfurl="true"]http://www.mister-pixel.com/#Content__state=is_that_simple[/URL]
     */
    try {
        document.execCommand('BackgroundImageCache', false, true);
    } catch(err) {}
</script>
  <script type="text/javascript">
       $(document).ready(function(){
        $("#ui-tabs > ul").tabs();
    });
</script>
<!-- InstanceEndEditable --></asp:Content>

<asp:Content ContentPlaceHolderID="Content" ID="Content" runat="server"><!-- InstanceBeginEditable name="Content" --> 
    <h2>Review Rules 2008</h2>
      
      <div id="container-1">
      <div id="ui-tabs">
           <ul>
             <li><h4><a href="#fragment-1">Summary</a></h4></li>
          <li><h4><a href="#fragment-2">Documents &amp; notices</a></h4></li>
          <li><h4><a href="#fragment-3">Background &amp; Purpose</a></h4></li>
        </ul>
      </div>
      
      <div id="fragment-1">
        <h3><a name="fragment-1"></a>Summary</h3>
          <p>In 2007 we began reviewing the existing Rules 
            Version 3.0 and Version 3.1. <a href="#1">Read related documents and notices</a> , or learn about the <a href="#2">background 
            and purpose</a> of the review.</p>
          <h4>Latest notices</h4>
          <ul>
            <li><a href="#">26 April 2008: Nine 
              submissions received</a></li>
          </ul>
          <h4>Latest documents </h4>
          <ul>
            <li><a href="#">13 November 2007: draft Rules 2008</a> </li>
          </ul>
          <h4>What's next?</h4>
          <p>Public submissions are being considered by the committee responsible 
            for reviewing the draft.</p>
      </div>
      
      <div id="fragment-2">
        <h3><a name="fragment-2"></a>Documents &amp; notices</h3>
          <p><a name="1"></a>Read related documents:</p>
          <ul>
            <li>13 November 2007: <a href="#" target="_top">Rules 2008 </a> </li>
            <li>9 August 2002: <a href="#" target="_top">Rules Version 3.0 - 1 of 2 (Rules) </a> </li>
            <li>9 August 2002: <a href="#">Rating 
              Valuation Rules Version 3.0 - 2 of 2 (Appendices) </a></li>
          </ul>
          <p>News and notices relating to the review:</p>
          <ul>
            <li>26 April 2008: <a href="#">draft Rating Valuation 
              Rules</a></li>
            <li>21 December 2007: draft Rules 2008 has closed</li>
          </ul>
      </div>
      <div id="fragment-3">
        <h3><a name="fragment-3"></a><span>Background &amp; purpose</span></h3>
          <p>The Rules are issued in the interests 
            of ensuring a  consistent, impartial, independent, and equitable 
            system that can be monitored and audited.</p>
          <p>These Rules supersede the existing Rules Version 
            3.0 and Version 3.1.</p>
          <p> The period for submissions on the draft Rules 
            2008 closed on 21 December 2007.</p>
        </div>
      
      </div>
<!-- InstanceEndEditable --></asp:Content>
  
<asp:Content ContentPlaceHolderID="Resources" ID="Resources" runat="server"><!-- InstanceBeginEditable name="Resources Navigation" --> 
      <h3>Resources</h3>
        <h4>Topics</h4>
        <ul>
          <li>Information</li>
          <li><a href="/index.aspx">administers</a></li>
        </ul>
      
        <!-- InstanceEndEditable --></asp:Content>

<asp:Content ContentPlaceHolderID="TemplateTag" ID="TemplateTag" runat="server"></asp:Content>

 

[BillyRayPreachersSon]

The jQuery tab library seems to have a "showTab" method, which you probably need to call to show the relevant tab first.

I'm more of a Prototype.js user than a jQuery user, so can't help you with thr exact syntax... but given the obvious method name ('showTab'), I'm sure it's got to do what it says on the tin...

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tinggg]

thanks Dan, it does help.

Cheers
t