Make a link do two actions?

Question

How can I make a link have two actions? Here's what I need to do:

I'm using the jQuery ScrollTo plugin to scroll to an anchor when a link is clicked. But I also need that same click to load new content into an iframe located in the div it's scrolling to.

<a href="#scrollhere">link</a

.

.

.


<div id="scrollhere">

     <iframe that will load different page based on the link that was clicked>

</div>

Normally, each of these two actions uses the "href" part of the link to do the action, but a link can't have two hrefs. How would I accomplish this?

I don't have to use an iframe if there is a better solution. Basically I just need several links to scroll you to the same anchor div. but depending on the link clicked, the content loaded in that div will be different.

Thank you!

Answer 1

you need to write a function to update the src of the iframe, and add this function as click event handler to anchors. And sent the specific link as the parameter into the function in each anchor. For detail, please look below sample:

    <a href="#scrollhere" onclick="loadOnFrame ('/hello.html')">link 01</a>

    <a href="#scrollhere" onclick="loadOnFrame ('/world.html')">link 02</a>


    <div id="scrollhere">
        <iframe src=""></iframe>
    </div>

    <script>
        var loadOnFrame = function(url) {
            $("#scrollhere iframe").attr("src", url);
        };    
    </script>