Question

这是我试图完成的jsfiddle .. http://jsfiddle.net/#&togetherjs=08LnngLQ1M

我试图让html文件中的内容交换进出。 java脚本文件设置为将幻灯片功能应用于我的div。请告诉我需要添加到javascript中的内容，以便允许信息交换和输出以及适当显示。

首先我的javascript文件是index.html文件。还显示了头部的CSS，以显示我是如何隐藏内容。

请告诉我如何实现我缺少的javascript，然后在必要时对我的html和CSS进行适当的更改。

$(document).ready(function() {

  var hash = window.location.hash.substr(1);
  var href = $('#navigationMenu li a').each(function(){
      var href = $(this).attr('href');
      if(hash==href.substr(0,href.length-5)){
          var toLoad = hash+'.html #content';
          $('#content').load(toLoad)
      }                                           
  });

  $('#navigationMenu li a').click(function(){

      var toLoad = $(this).attr('href')+' #content';
      $('#content').hide('fast',loadContent);
      $('#load').remove();
      $('#wrapper').append('<span id="load">LOADING...</span>');
      $('#load').fadeIn('normal');
      window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);


      function loadContent() {
          $('#content').load(toLoad,'',showNewContent())
      }

      function showNewContent() {
          $('#content').show('normal',hideLoader());
      }

      function hideLoader() {
          $('#load').fadeOut('normal');
      }
      return false;



  });

});





    <style type="text/css">
    #page1, #page2, #page3, #page4, #page5 {
      display: none;
      overflow:hidden;
    }
    </style>


    </head>

    <body>
    <div id="top">
    </div>


    <!-- The navigation css is in styles.css -->

    <div id="main">

    <ul id="navigationMenu">
        <li>
          <a class="home" href="#home">
                <span>Home</span>
            </a>
        </li>

        <li>
          <a class="about" href="#about">
                <span>About</span>
            </a>
        </li>

        <li>
           <a class="services" href="#services">
                <span>Services</span>
             </a>
        </li>

        <li>
          <a class="portfolio" href="#portfolio">
                <span>Portfolio</span>
            </a>
        </li>

        <li>
          <a class="contact" href="#contact">
                <span>Contact us</span>
            </a>
        </li>
    </ul>

    </div>


    <!-- The css for the main area is in css.css-->
    <!-- The wrapper and the content div control the jquery slide up effect -->
    <div id="wrapper">
      <div id="content">

        <!-- The 5 pages content divs will display in this area -->           

      </div>
    </div> 

    <!-- The actual content I want to switch in and out of the panel, this is hidden -->
     <div id="page1" class="pages">
     <p>1 Whole bunch of text 1</div>

     <div id="page2" class="pages">
     <p>2 Whole bunch of text 2</div>

     <div id="page3" class="pages">
     <p>3 Whole bunch of text 3</div>

     <div id="page4" class="pages">
     <p>4 Whole bunch of text 4</div>

     <div id="page5" class="pages">
     <p>5 Whole bunch of text 5</div>

Answer 1

我建议您更改html，以便您的“页面”具有实际对应于相关菜单项的href的ID：

<a href="#home">Home</a>

...
<div id="home" class="pages"><p>1 Whole bunch of text 1</p></div>

然后你可以实现你的幻灯片动画分页：

$(document).ready(function() {
    $("#navigationMenu a").click(function(e) {
        e.preventDefault();
        var item = this.href.split("#")[1];
        $("#content").slideUp(function() {
            $(this).empty()
                   .append($("#" + item).clone().show())
                   .slideDown();
        });
    });
});

请注意，无需使用.load()，因为您已拥有页面上的所有内容。您只需清空容器，然后附加相关内容的副本即可。

演示：http://jsfiddle.net/FtS8u/1/

或者在我看来，一个更简洁的选项是将所有内容移动到#content div开始，默认显示#home“页面”，然后隐藏并显示页面到位：

$(document).ready(function () {
    $("#navigationMenu a").click(function (e) {
        e.preventDefault();
        var item = this.href.split("#")[1];
        $(".pages:visible").slideUp(function () {
            $("#" + item).slideDown();
        });
    });
    $("#home").show();
});

演示：http://jsfiddle.net/FtS8u/2/

最后要考虑的事情是：如果你删除了.pages { display : none; } CSS而是使用jQuery来隐藏页面，方法是将它添加到文档的开头准备好了：

$(".pages").hide();

然后你仍然会得到同样的效果：http://jsfiddle.net/FtS8u/7/ - 除非用户碰巧禁用了JavaScript，页面仍然有效，因为默认的锚点导航将跳转到相关的div：{{ 3}}

javascript在页面上交换内容

1 个答案: