JQuery在iframe中加载动态页面_Jquery_Iframe

JQuery在iframe中加载动态页面

jquery iframe

JQuery在iframe中加载动态页面,jquery,iframe,Jquery,Iframe,我想通过导航菜单将动态页面加载到iframe中，如果我选择菜单选项FAQ，iframe将位于FAQ.php页面到src属性，依此类推如何将菜单的页面动态分配到下面 Jquery： <script type="text/javascript"> $(document).ready(function() { $("#mainFrame").attr("src", "faq.php"); }); </script> <div class="content"&

我想通过导航菜单将动态页面加载到iframe中，如果我选择菜单选项

FAQ

，iframe将位于

FAQ.php

页面到

src

属性，依此类推

如何将菜单的页面动态分配到下面

Jquery：

<script type="text/javascript">
$(document).ready(function() {
    $("#mainFrame").attr("src", "faq.php");
});
</script>


<div class="content">
    <div class="left">
        <ul id="menu">
            <li><a href="#">Banking</a></li>
            <li><a href="#">How To Join</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Help</a>
                <ul>
                    <li><a href="#">Subscribe</a></li>
                    <li><a href="#">Recipe</a></li>
                </ul>
            </li>
            <li><a 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>
</div>


$（文档）.ready（函数（）{
$（“#mainFrame”）.attr（“src”、“faq.php”）；
});













标题

请告知，谢谢。

简单地说：

<body>
    <div class="content">
        <div class="left">
            <ul id="menu">
                <li><a href="#">Banking</a></li>
                <li><a href="#">How To Join</a></li>
                <li><a href="#" id="faq">FAQ</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Help</a>
                    <ul>
                        <li><a href="#">Subscribe</a></li>
                        <li><a href="#">Recipe</a></li>
                    </ul>
                </li>
                <li><a 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>
    </div>
</body>

<script type="text/javascript">
$("#faq").click(function () { 
      $("#mainFrame").attr("src", "faq.php");
});
</script>















标题
$（“#常见问题”）。单击（函数（）{
$（“#mainFrame”）.attr（“src”、“faq.php”）；
});

我建议您为所有链接使用一个类，并使用data属性在iframe中传递要加载的文件名：

<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>

我很感兴趣。做

$（“.anchor”）。每个（函数（）{}）

比只做

$（“.anchor”）。单击（函数（）{}）

有什么好处？

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