Our Blogs Feeds:

Topics:

"The map appears more real to us than the land."

-Lawrence

Introducing switchTarget jQuery Plugin

Published by Yulka Plekhanova on Dec 4, 2009 at 11:35 PM.

About

I developed this plugin while working on one of my projects. Since I couldn't find a plugin that could have solved a all of my use cases, I decided to develop my own.

Usage

To use the plugin, first include the jQuery library and then the switchTarget javascript file in the head of your file.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.switchTarget.1.0.js" type="text/javascript"></script>

Following the example below, create links and targets.

<a href="#">Link 1</a>
<a href="#">Link 2</a>

<div id="target-1">Target 1</div>
<div id="target-2">Target 2</div>

Assign class to links. For example,

<a href="#" class="links">Link 1</a>
<a href="#" class="links">Link 2</a>

Link your links to targets

<a href="#target-1" class="links">Link 1</a>
<a href="#target-2" class="links">Link 2</a>

Initialize the switchTarget plugin

$(function () { 
    $(".links").switchTarget();
});

Your code should look similar to the example below:

<html>
<head>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.switchTarget.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () { 
            $(".links").switchTarget();        
        });
    </script>
</head>
<body>
    <a href="#target-1" class="links">Link 1</a>
    <a href="#target-2" class="links">Link 2</a>
    <br />
    <div id="target-1">Target 1</div>
    <div id="target-2">Target 2</div>
</body>
</html>

Take a look at the demo page and add options options if necessary.

VIEW DEMO | DOWNLOAD

Browser Support

This plugin has been tested in the following browsers:

IE6, IE7, IE8, Firefox 3.5.4 (Mac), Firefox 3.0.14 (PC), Safari 4.0.3, Opera 9.63, Chrome 1.0.154

blog comments powered by Disqus