永余PHP社区 - PHP视频教程|PHP新手乐园|PHP高级应用|PHP源码|PHP教程|LAMP教程||Ajax教程 - JavaScript源码 - JavaScript教程

如果你的网站是有关编程教程的，那么你一定常常要在页面显示源代码，特别是在那些演示页面。虽然用户可以通过右键点击查看页面源代码（大部分浏览器都有这个功能），但是这不如直接在页面上点击一个链接，然后在同一个页面上显示代码来的简单方便。下面就要介绍如何使用jQuery来实现这个功能。

首先我们要个显示代码的链接，并且给这个链接加上一个class，这样就可以让显示代码功能只有在这一类的链接上有效。

1. 链接代码：

<a href="showSource.js" class="seeCode">查看代码</a>

<!--注意:

这里的href是指你要查看的源代码的文件名。
如果是当前页，你可以用href=“#” 更正（2009/1/20)：用‘#’的方法在IE下行不通。
-->

2. Javascript代码：

<script type="text/javascript">

  $( document ) . ready ( 

  function() {

    $('a.seeCode').each (

      function( i ) {

        $( this ).after( '<pre class="seeCode"></pre></div>' );

      }

    )

    $( 'pre.seeCode' ).hide();

    $('a.seeCode').toggle ( 

      function() {

    if( !this.old ){

      this.old = $(this).html();

    }

        $(this).html('隐藏代码');

        parseCode(this);

      },

      function() {

        $(this).html(this.old);

        $(this.nextSibling).hide();

      }

    )

    function parseCode(o){

      if(!o.nextSibling.hascode){

          $.get (o.href, //注意：这里用到ajax - .get()

            function(code){

              code=code.replace(/&/mg,'&#38;');

              code=code.replace(/</mg,'&#60;');

              code=code.replace(/>/mg,'&#62;');

              code=code.replace(/\"/mg,'&#34;');

              code=code.replace(/\t/g,'  ');

              code=code.replace(/\r?\n/g,'<br>');

              code=code.replace(/<br><br>/g,'<br>');

              code=code.replace(/ /g,'&nbsp;');

              o.nextSibling.innerHTML=code;

              o.nextSibling.hascode=true;

            }

          );

      }

      $(o.nextSibling).show();

    }

  }

)

</script>

注意：上述代码用到ajax 的.get()方法,通过给定的代码href，得到代码运行的结果。这种方法可以直接显示css、javascript、html等静态的代码。但是不能显示的动态代码，例如：php文件，用这种方法得到的实际上是php运行的结果。我会在以后的文章里介绍如何显示php文件。

另外，从上述代码里我们还可以看到，代码会被显示在“seeCode”class的链接下，并且被放在<pre>标签里，所以我们有必要给<pre>加上css样式，这样显示的代码就比较容易和页面的其他内容区分开来。

3. CSS代码：

pre {

  padding: 5px;

  color: #000;

  background-color: #DDD;

  border: 1px solid #CCC;

  line-height: 1.1em;

  overflow: auto;

}

演示：1. 显示HTML  2.显示php代码运行结果