Question

点击li后，我想在主索引页面上加载一个单独的html页面。

HTML

 <nav>
        <ul>
            <li><a href="tab-1.html">Planet 1</a></li>
            <li><a href="tab-2.html">Planet 2</a></li>
            <li><a href="tab-3.html">Planet 3</a></li>
            <li><a href="tab-4.html">Planet 4</a></li>
        </ul>
    </nav>

因此，一旦单击其中一个链接，我希望jquery在同一页面上加载内容。

 $(document).ready(function(){


            // load("location-to-your-file", function(){})
            //var indexCatch =  $('ul li').click(function(){ alert($(this).index()); });  


                $("li").click(function(){

                $("main").load("tab-1.html", function(){

                    // Instead of creating another selector combining it from $(this).hide()
                    // $($(this).hide()).fadeIn(1000);

                    // you can chain the methods:
                    $(this).hide().fadeIn(1000);
                });
            });

先谢谢了。

Answer 1

它为我工作，保存此文件 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>

保存此文件 tab-1.php

<b><i>Hello : <?php echo $_GET['txt_value']; ?></i></b>

Answer 2

您的问题可能是您使用的是<a>代码

你不需要它们

<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);
        });
    });
});

Answer 3

这里我们得到特定链接href属性的值，并将其注入到加载函数

注意：由于我无法使用小提琴或S.O代码面板展示它，所以这里有DEMO显示此代码如何工作

＆＃13;

$(document).ready(function () {
  $("nav a").each(function () {
    $(this).click(function (e) {
      e.preventDefault();
      var href = $(this).attr("href");
      $("main").load(href).hide().fadeIn(1000);
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav>
    <ul>
        <li><a href="tab-1.html">Planet 1</a>

        </li>
        <li><a href="tab-2.html">Planet 2</a>

        </li>
        <li><a href="tab-3.html">Planet 3</a>

        </li>
        <li><a href="tab-4.html">Planet 4</a>

        </li>
    </ul>
</nav>
<main></main>

＆＃13;

试图将html页面加载到页面上

3 个答案: