Loading Tab Menu src attribute to an iFrame attribute using jquery

Question

I have a list of tabs like the one below. I need to load the href attribute URL to the iFrames src attribute, on click of the tabs. The iframe is the content that display these html pages. The following jquery doesn't seem to work. Can you help?

 <!--Tabs-->
                    <div class="collapse navbar-collapse navbar-responsive-collapse">
                        <ul class="menu-nav-holder">
                            <li class="logout-menu-nav"><a href="home.html">Logout</a></li> 
                            <li class="menu-nav"><a href="clientassignbuses.html">Assign Bus</a></li>
                            <li class="menu-nav"><a href="clientattendancereport.html">Check Attendance</a></li>
                            <li class="menu-nav"><a href="clientmanagestudcontent.html">Manage Students</a></li>
                            <li class="menu-nav"><a href="clientmanageschoolcontent.html">Manage School</a></li>
                            <li class="menu-nav"><a href="clientmanagebuscontent.html">Manage Bus</a></li>
                            <li class="menu-nav"><a href="mainhome_V2.html">Home</a></li>                               
                        </ul>
                    </div>

    <!--iFrame-->
                <div id="iframewrapper">
                    <iframe id="iframecontainer" src="clientassignbuses.html" onload="resize_iframe()"></iframe>
                </div>

            <script language="JavaScript">
               $(".iframeload").click(function(e){
                 e.preventDefault();
                 $("#iframecontainer").each(function(){
                    $(this).attr("src", $(".iframeload").data("href"));
                   });
                });
            </script>

What is this iframeload? I couldn't see any HTML markup for this class — Sandeeproop
yes the iframe loads the respective html pages from the tabs. — deepak

Pablo Martinez Pablo Martinez · Accepted Answer · 2014-06-12T08:41:07

try saving the href of the a clicked

$(".iframeload").click(function(e){
    e.preventDefault();
    var url=$(this).attr("href");
    $("#iframecontainer").each(function(){
        $(this).attr("src", url);
    });
});

if you use: $(".iframeload").data("href") you are getting all the hrefs of the class=" iframeload"

Loading Tab Menu src attribute to an iFrame attribute using jquery

1 Answers