Загрузите динамическую страницу JQuery в iframe

Я хочу загрузить динамическую страницу в iframe через меню навигации, если я выберу пункт меню FAQ, iframe будет расположен faq.php с атрибутом src и т. Д.Загрузите динамическую страницу JQuery в iframe

Как я могу динамически назначать страницу меню внизу?

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>

Пожалуйста, посоветуйте, спасибо.

источник

2013-04-07 conmen

Я хотел бы предложить вам использовать класс для все связывания, а также передавая имя файла, который вы хотите загрузить в 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>

Затем вы можете использовать JQuery для загрузки содержимого фрейма динамически с помощью:

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

Working Demo

источник

2013-04-07 15:03:39 Eli

Я заинтригован. Какая польза от выполнения '$ (". Anchor "). Each (function() {})' over just doing '$ (". Anchor "). Click (function() {})'? –

Просто так:

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

источник

2013-04-07 14:58:36 Kai23

Загрузите динамическую страницу JQuery в iframe

ответ

Смежные вопросы