Iframe Navigation

by Paul Leech

HTML

<div class="left">
            <ul id="menu">
<li><a class="anchor" data-url="banking.php" href="#">Banking</a></li>
<li><a class="anchor" data-url="join.php" href="#">How To Join</a></li>
<li><a class="anchor" data-url="faq.php" href="#">FAQ</a></li>
<li><a class="anchor" data-url="about.php" href="#">Contact Us</a></li>
<li><a class="anchor" data-url="help.php" href="#">Help</a>
    <ul>
        <li><a class="anchor" data-url="subscribe.php" href="#">Subscribe</a></li>
        <li><a class="anchor" data-url="recipe.php" href="#">Recipe</a></li>
    </ul>
</li>
<li><a class="anchor" data-url="term.php" href="#">Terms &amp; Conditions</a></li>
                </ul>
        </div>
<div class="right">
            <div>Title</div>
            <div><iframe src="" frameborder="0" id="mainFrame" name="mainFrame"></iframe>
    </div>
</div>

JavaScript

$(".anchor").each(function(){
    var el = $(this);
    el.click(function() {
        $("#mainFrame").attr("src", el.data('url'));
    })
});