Question

我使用链接打开html表单

我的问题是：如何在下方打开html表单。

CODE

<p class="flaticon-right127"><a href="mobile.html">Mobile&nbsp;Phones</a>
<p class="flaticon-right127"><a href="tablet.html">Tablets</a></p>
<p class="flaticon-right127"><a href="accessories.html">Mobile&nbsp;Accessories</a></p>

当我点击链接上的链接时，该文件应该在同一页面中打开。

mobile.php

 *mobile form field*

tablet.php

 *tablet form field*

accessories.php

 *accessories form field*

Answer 1

由于您标记了jquery，因此在这种情况下您只需.load()方法：

<p class="flaticon-right127"><a class="reveal" href="mobile.html">Mobile&nbsp;Phones</a>
<p class="flaticon-right127"><a class="reveal" href="tablet.html">Tablets</a></p>
<p class="flaticon-right127"><a class="reveal" href="accessories.html">Mobile&nbsp;Accessories</a></p>

<div class="page"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $('.reveal').on('click', function(e){
        e.preventDefault();
        var link = $(this).attr('href');
        $('.page').load(link);
    });

});
</script>

或者只是一个简单的iframe：

<p class="flaticon-right127"><a class="reveal" href="mobile.html" target="page">Mobile&nbsp;Phones</a>
<p class="flaticon-right127"><a class="reveal" href="tablet.html" target="page">Tablets</a></p>
<p class="flaticon-right127"><a class="reveal" href="accessories.html" target="page">Mobile&nbsp;Accessories</a></p>

<iframe src="" name="page" frameborder="0"></iframe>

我不明白你为什么要这样做，但是如果你想要隐藏你点击的链接以外的链接，只需在.load()之后添加内部onclick回调：

$('.reveal').hide();
$(this).show();

在同一页面中打开HTML表单

1 个答案: