Question

我有一个导航菜单，我想在不刷新整个网站的情况下在网页之间切换。例如，按下信息它将出现，主页或联系人将消失。

<nav id="menu">
  <ul>
   <li><a href="javascript:appear('Home');">Home</a></li>
   <li><a href="javascript:appear('Info');">Info</a></li>
   <li><a href="javascript:appear('Contact');">Contact</a></li>
  </ul>
</nav>

我开始创建我的初始标题，但它没有被正确解释，因此我被卡住了。这就是我到目前为止所做的：

<script type="text/javascript">
  function appear {
   var item = document.getElementById;
   if (item) {
   if(item.className == "Show") {
      item.className = "Hide"
  } 
   else {
   item.className = "Show"
  }
</script>

这是¨Show¨和¨Hide¨在css文件中定义：

#Home.Hide, #Info.Hide, #Contact.Hide {
 display: none;
}

#Home.Show, #Info.Show, #Contact.Show {
 display: block;
}

Answer 1

正在寻找jQuery AJAX加载吗？

function appear() { 
   $.ajax({
        url: "info.html", 
        success: function(result){
        $(".ClassName").html(result);
    }});
 });
}

或以其他方式做到：

function appear() {
    $(".ClassName").load("info.html");
});

使用点击功能激活li

$("li:nth-of-type(2)").click(function(){
   put your code here...
});

打开网页，无需刷新

1 个答案: