Javascript 正在尝试将html页面加载到页面_Javascript_Jquery_Html

Javascript 正在尝试将html页面加载到页面

javascript jquery html

Javascript 正在尝试将html页面加载到页面,javascript,jquery,html,Javascript,Jquery,Html,单击li后，我想加载一个单独的html页面，其中包含主索引页面上的内容 HTML 提前谢谢您的问题可能是您正在使用标记你不需要它们 <nav> <ul> <li data-href="tab-1.html">Planet 1</li> <li data-href="tab-2.html">Planet 2</li> <li data-href="tab-3.h

单击li后，我想加载一个单独的html页面，其中包含主索引页面上的内容

HTML

提前谢谢

您的问题可能是您正在使用

标记

你不需要它们

<nav>
    <ul>
        <li data-href="tab-1.html">Planet 1</li>
        <li data-href="tab-2.html">Planet 2</li>
        <li data-href="tab-3.html">Planet 3</li>
        <li data-href="tab-4.html">Planet 4</li>
    </ul>
</nav>
$(document).ready(function(){
    $("li").click(function () {
        $("main").load(this.dataset.href, function(){
            $(this).hide().fadeIn(1000);
        });
    });
});



行星1
行星2
行星3
行星4

$（文档）.ready（函数（）{
$（“li”）。单击（函数（）{
$（“main”）.load（this.dataset.href，function（）{
$（this.hide（）.fadeIn（1000）；
});
});
});

您的问题可能是您正在使用

标记

你不需要它们

<nav>
    <ul>
        <li data-href="tab-1.html">Planet 1</li>
        <li data-href="tab-2.html">Planet 2</li>
        <li data-href="tab-3.html">Planet 3</li>
        <li data-href="tab-4.html">Planet 4</li>
    </ul>
</nav>
$(document).ready(function(){
    $("li").click(function () {
        $("main").load(this.dataset.href, function(){
            $(this).hide().fadeIn(1000);
        });
    });
});



行星1
行星2
行星3
行星4

$（文档）.ready（函数（）{
$（“li”）。单击（函数（）{
$（“main”）.load（this.dataset.href，function（）{
$（this.hide（）.fadeIn（1000）；
});
});
});

这里我们获得特定链接

href

属性的值，并将其注入load函数中

注意：由于我无法使用fiddle或S.O代码面板显示它的演示，下面是一个演示此代码如何工作的示例

$（文档）.ready（函数（）{
$（“资产净值”）。每个（功能）{
$（此）。单击（函数（e）{
e、 预防默认值（）；
var href=$（this.attr（“href”）；
$（“main”）.load（href.hide（）.fadeIn（1000）；
});
});
});











这里我们获得特定链接href
属性的值，并将其注入load函数中
注意：由于我无法使用fiddle或S.O代码面板显示它的演示，下面是一个演示此代码如何工作的示例

$（文档）.ready（函数（）{
$（“资产净值”）。每个（功能）{
$（此）。单击（函数（e）{
e、 预防默认值（）；
var href=$（this.attr（“href”）；
$（“main”）.load（href.hide（）.fadeIn（1000）；
});
});
});











这对我有用，
保存此文件example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Include</title>
</head>
<body>
<input type="text" id="txt_name">
<a id="link" href="#">Click Test Link</a>

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript"> 
$("#link").on('click',function(){
value=$("#txt_name").val();
window.location = "tab-1.php?txt_value="+value;
});
</script> 
</body>
</html>


包括
$（“#链接”）。在（'click'，function（）上{
value=$（“#txt_name”）.val（）；
window.location=“tab-1.php？txt_value=“+value；
});

保存此文件tab-1.php
<b><i>Hello : <?php echo $_GET['txt_value']; ?></i></b>

你好：
这对我有用，
保存此文件example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Include</title>
</head>
<body>
<input type="text" id="txt_name">
<a id="link" href="#">Click Test Link</a>

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript"> 
$("#link").on('click',function(){
value=$("#txt_name").val();
window.location = "tab-1.php?txt_value="+value;
});
</script> 
</body>
</html>


包括
$（“#链接”）。在（'click'，function（）上{
value=$（“#txt_name”）.val（）；
window.location=“tab-1.php？txt_value=“+value；
});

保存此文件tab-1.php
<b><i>Hello : <?php echo $_GET['txt_value']; ?></i></b>

你好：
因此，您希望在用户单击该特定链接后加载名在链接的href
部分的页面？$（“main”）
-是否有名为
的html元素？正确！我希望tab-1.html的内容加载到索引页的部分。因此，您希望在用户单击该特定链接后加载名为href
的链接的部分中的页面？$（“main”）
-是否有名为
的html元素？正确！我想将tab-1.html的内容加载到索引页的部分。这对于a标记来说是有意义的，但它仍然没有将内容加载到主部分。在这种情况下，您没有显示的html
有问题，或者使用tab-#.html
的内容，或者使用tab-#.html
的位置。。。上面带有
标记的代码运行良好我更正了错误，当单击第二个链接时，它仍然会显示tab-1.html上的内容，而不是tab-2.html上的内容。上面的代码按照您的要求运行。。。您如何实现它超出了我的控制，对于a标记来说是有意义的，但是它仍然没有将内容加载到主部分。在这种情况下，您没有显示的html
或tab-#.html
的内容或tab-#.html
的位置有问题。。。上面带有
标记的代码运行良好我更正了错误，当单击第二个链接时，它仍然会显示tab-1.html上的内容，而不是tab-2.html上的内容。上面的代码按照您的要求运行。。。你是如何实现它的超出了我的控制它似乎仍然没有加载选项卡的任何内容-#。html页面这确实有效，我在发布之前已经测试过了，这些子页面是否与此页面位于同一目录级别？问题是因为在我的示例代码中，我使用了
，而在你的代码中，你使用的是
，现在它已经解决了，应该可以为您工作了。它似乎仍然没有加载选项卡的任何内容-#。html页面确实可以工作，我在发布之前已经测试过了，这些子页面是否与此页面位于同一目录级别？问题是因为在我的示例代码中，我使用了
，而在您的代码中，您使用的是
，现在它已经解决了，应该对你有用了