Question

我有一个单击每次点击付费（PPC）着陆页，其主页/服务/关于

顶部有一个菜单

我不想为Services / About提供另外两个页面。我只是想改变内容＆amp;根据服务点击或关于点击，替换div class="inner"到!--inner--之后的所有内容。

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

Answer 1

听起来你想加载你的单页应用程序的所有内容＆＃34;在开始时。每个部分都将包含在自己的<divs>中。只有＆＃34; Home＆＃34;的div。将显示其他<div>隐藏的数据。当菜单选择发生变化时，将显示其他div并隐藏其他div。

Answer 2

$(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-->

Answer 3

根据单击的菜单按钮将内容放入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>

Answer 4

使用JQuery和一些效果：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用导航菜单显示隐藏HTML代码/内容

4 个答案: