How to Create a Manual Hyperlink to a Spry Tab

"Spry Tabs" is a JavaScript widget that creates a tabbed interface on your Web page. Each tab can display different content, which allows you to condense a large amount of content into a small area. You can link directly to a particular tab by using a special "onClick" JavaScript command from within your HTML anchor tag. This will open whichever tab you choose in the "Spry Tab" widget, displaying the content on the tab for the user.

Instructions

    • 1

      Right-click the Web page document that contains the "Spry Tabs" widget.

    • 2

      Click "Open With." Click to choose "Notepad" or "WordPad" and then click "OK."

    • 3

      Locate the "Spry Tabs" widget. The widget consists of an unordered list ("<ul>" and "<li>" tags) and several "<div>" containers, enclosed within an opening "<div>" tag and a closing "</div>" tag. The opening "<div>" tag contains a defined "id" property, such as "id='TabbedPanels1'" that will be used to reference the widget.

    • 4

      Click to place your cursor on a blank line where you want to create the hyperlink.

    • 5

      Type "<a href='#' onClick='TabbedPanels1.showPanel(X); return false;'>" on the blank line.

    • 6

      Replace the "TabbedPanels1" text in the previous step with the "id" value from the "Spry Tabs" widget found in Step 3. Replace the "X" in the "showPanel(X)" text in the previous step with the panel number that you want to open with the hyperlink, such as "showPanel(2)". If linking directly to a tab from a different page, replace the "#" in the "href='#'" text in the previous step with the URL of the Web page that contains the "Spry Tabs" widget.

    • 7

      Click the "File" menu and then click "Save" to save the edited Web page.

Related Searches:

References

Comments

Related Ads

Featured