使用导航菜单显示隐藏html代码/内容 - show hide html code/content using nav menu

我有一个点击付费（PPC）登录页，在主页/服务/关于的顶部有一个菜单

我不想有另外两页的服务/关于。我只想更改内容&基于服务点击或关于点击来替换包括div class="inner"到!--inner--之后的所有内容。

因此，当登录页面时，主页内容默认为，但当单击服务导航时，它只会更改所有内容，包括<div class="inner">和之后的html内容等等。

使用JQuery和一些效果：

$(function() {
  $('nav a').click(function() {
    // Get the section to show
    var $section = $('#' + $(this).data('section'));
    // If its already visible, do nothing.
    // Otherwise, hide the others and then fade in the desired section.
    if (!$section.is(':visible')) {
      $('.hideable-section').hide();
      $section.fadeIn();
    }
  });
});

ul {
  padding: 0;
}
li {
  list-style-type: none;
  display: inline-block;
  margin-right: 8px;
}
a {
  cursor: pointer;
  color: #7ca6e0;
}
a:hover {
  text-decoration: underline;
}
.hideable-section {
  display: none;
}
.hideable-section:first-of-type {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a data-section="home">Home</a></li>
    <li><a data-section="about">About</a></li>
    <li><a data-section="services">Services</a></li>
  </ul>
</nav>
<div id="home" class="hideable-section">Home Content</div>
<div id="about" class="hideable-section">About Content</div>
<div id="services" class="hideable-section">Services Content</div>

根据单击的菜单按钮将内容放入div并显示/隐藏。参考以下示例

 <html>
 <head>
     <title>PPC</title>
     <script type="text/javascript">
         function ShowContent(content) {
             document.getElementById("divHome").style.display = 'none'
             document.getElementById("divAbout").style.display = 'none';
             document.getElementById("divServices").style.display = 'none';
             document.getElementById(content).style.display = 'block';
        }
    </script>
</head>
    <body>
        <a id="lnkHome" href="#" onclick="return ShowContent('divHome');" >Home</a>
        <a id="lnkAbout" href="#" onclick="return ShowContent('divAbout');" >About</a>
        <a id="lnkServices" href="#" onclick="return ShowContent('divServices');" >Services</a>
        <div id="divHome" style="display:block">Home Contents</div>
        <div id="divAbout" style="display:none">About Contents</div>
        <div id="divServices" style="display:none">Services Contents</div>
    </body>
</html>

听起来您想在开始时加载"单页应用程序"的所有内容。每个部分都将被封装在它们自己的<divs>中。只有"Home"数据的div会显示，而其他<div>的则会隐藏。当菜单选择发生变化时，其他div将被显示，其他div则被隐藏。

$(document).ready(function(){
  //HIDE ALL CONTENTS
  $(".content").hide();
  //EVENT CLICK
  $(".menu a").click(function(event){
   //PREVENT RELOAD
    event.preventDefault();
    
    //HIDE ALL CONTENTS
    $(".content").hide();
    //GET ID FROM NEW CONTENT TO SHOW
    var id_content = $(this).attr("href");
    //SHOW NEW CONTENT
    $(id_content).show();
    
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
  <li><a href="#about" class="active">About</a></li>
    <li><a href="#services">Services</a></li>
</ul>
<!-- CONTENT--->
<div class="wrapper">
  <div id="about" class="content">
    content from about
  </div>
  <div id="services" class="content">
other content info from services
  </div>
</div>
<!---END CONTENT-->