如何使用自定义链接显示带有 ajax 的特定页面？答案

【问题标题】：How to use custom Links to display specific page with ajax?如何使用自定义链接显示带有 ajax 的特定页面？
【发布时间】：2016-09-19 14:52:47
【问题描述】：

好的，所以我终于对我的网站进行了最后的润色，我注意到考虑到浏览器中的地址永远不会改变，我很难宣传网站的某些部分。如果您访问我的页面，我会在一个带有 ajax 编码的 div 中打开几个链接。现在假设我想在我的网站上推广一个指向特定位置或页面的链接，我无法做到，因为该链接只会指向主页。如何让网站在单击时专门加载到页面链接。含义我如何使用单独的链接宣传我网站上的某些页面或部分，而不是必须将用户发送到一个链接并且他们必须搜索内容或他们正在寻找的内容。

演示：http://trillumonopoly.com/index2.html

这是我的编码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="shortcut icon" href="favicon.ico">
<title>iLLumonopoly Global ::The Next Level::</title>
<meta charset="utf-8">
<meta name="language" content="English"> 
<meta name="description" content="Illumonopoly Global is the best and the first I.M.M.P (International Mass Media Production) of its generation. We Provide many services with Quality products and reasonable rates with the fastest turn around times Online. We house Several Business In many different markets. We Focus on Helping you to develop your Brand and elevating your business to the next level. A List Service, A List Staff, for our A List Clients. Let Us Help You Elevate your brand to The Next Level. Illumonopoly Global">
<meta name="keywords" content="Rap, hip hop, hip-hop, blog, Musical instruments, beat machine, maschine, pro tools, mixer, microphone, distribution, music distribution, video distribution, radio promotions, radio, mixtape, T. Cartel, T. Cvrt3l, Todd Gotti, T. Gotti, Bricksquad, Zareyah, Zareyah evolved, beats, trap music, Vevo, MTV,Spotify, 2 Chainz, Def Jam, Universal Music Group, FDE, Printing, Audio, Video, Production, Audio Production, Beats, Video Production, Email Blast, Promotion, Product, Services, Printing Services, Cheap Printing Services, Cheap Beats, Graphic Design, Logo Design, Flyer Design, Poster Design, Blue Lines and Big Faces, Facebook marketing, Twitter marketing, Youtube views, Datpiff marketing,  ">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-site-verification" content="KpWnMe8Ghac9bdfocoBvVgALEGCe1zHqTFO2ZTHjaXo" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fullwidthAudioPlayer.css">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Allura&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/set1.css">
<link rel="stylesheet" type="text/css" href="content/global.css">
<script type="text/javascript" src="https://cdn.snipcart.com/scripts/snipcart.js" id="snipcart"
  data-api-key="ZDZiMGY0NjEtODk2NC00NDM3LWIyNjctZTE5M2I4NzFiMjRmNjM1ODkzMTg4NzE1MjMzMDIw"></script>
<link type="text/css" href="https://cdn.snipcart.com/themes/base/snipcart.min.css" rel="stylesheet" />
<script type="text/javascript" src="java/FWDMSP.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/demo-4.css" type="text/css">
<script type="text/javascript">
    FWDMSPUtils.onReady(function(){
        new FWDMSP({
            //main settings
            instanceName:"player1",
            playlistsId:"playlists",
            mainFolderPath:"content",
            skinPath:"minimal_skin_white",
            facebookAppId:"213684265480896",//required only if the facebook share button is used
            showSoundCloudUserNameInTitle:"yes",
            position:"bottom",
            useDeepLinking:"no",
            rightClickContextMenu:"disabled",
            showButtonsToolTips:"yes",
            animate:"yes",
            autoPlay:"yes",
            loop:"no",
            shuffle:"no",
            maxWidth:1030,
            volume:.8,
            toolTipsButtonsHideDelay:1.5,
            toolTipsButtonFontColor:"#888888",
            //controller settings
            showControllerByDefault:"yes",
            showThumbnail:"yes",
            showSoundAnimation:"yes",
            showLoopButton:"yes",
            showShuffleButton:"no",
            showDownloadMp3Button:"yes",
            showBuyButton:"yes ",
            showFacebookButton:"no",
            expandBackground:"no",
            titleColor:"#000000",
            timeColor:"#000000",
            //controller align and size settings (described in detail in the documentation!)
            controllerHeight:76,
            startSpaceBetweenButtons:9,
            spaceBetweenButtons:8,
            separatorOffsetOutSpace:5,
            separatorOffsetInSpace:9,
            lastButtonsOffsetTop:14,
            allButtonsOffsetTopAndBottom:14,
            titleBarOffsetTop:13,
            mainScrubberOffsetTop:47,
            spaceBetweenMainScrubberAndTime:10,
            startTimeSpace:10,
            scrubbersOffsetWidth:2,
            scrubbersOffestTotalWidth:0,
            volumeButtonAndScrubberOffsetTop:47,
            spaceBetweenVolumeButtonAndScrubber:6,
            volumeScrubberOffestWidth:4,
            scrubberOffsetBottom:10,
            equlizerOffsetLeft:1,
            //playlists window settings
            showPlaylistsButtonAndPlaylists:"no",
            showPlaylistsByDefault:"no",
            thumbnailSelectedType:"opacity",
            startAtPlaylist:20,
            startAtTrack:0,
            buttonsMargins:0,
            thumbnailMaxWidth:330, 
            thumbnailMaxHeight:330,
            horizontalSpaceBetweenThumbnails:40,
            verticalSpaceBetweenThumbnails:40,
            //playlist settings
            showPlayListButtonAndPlaylist:"no",
            showPlayListOnAndroid:"no",
            showPlayListByDefault:"no",
            showPlaylistItemPlayButton:"yes",
            showPlaylistItemDownloadButton:"yes",
            showPlaylistItemBuyButton:"yes",
            forceDisableDownloadButtonForPodcast:"yes",
            forceDisableDownloadButtonForOfficialFM:"yes",
            forceDisableDownloadButtonForFolder:"yes",
            addScrollBarMouseWheelSupport:"yes",
            showTracksNumbers:"yes",
            playlistBackgroundColor:"#ffa500",
            trackTitleNormalColor:"#888888",
            trackTitleSelectedColor:"#FFFFFF",
            trackDurationColor:"#666666",
            maxPlaylistItems:100,
            nrOfVisiblePlaylistItems:12,
            trackTitleOffsetLeft:0,
            playPauseButtonOffsetLeftAndRight:11,
            durationOffsetRight:9,
            downloadButtonOffsetRight:11,
            scrollbarOffestWidth:7,
            //search bar settings
            showSearchBar:"no",
            showSortButtons:"yes",
            searchInputColor:"#999999",
            searchBarHeight:38,
            //opener settings
            openerAlignment:"right",
            showOpener:"yes",
            showOpenerPlayPauseButton:"yes",
            openerEqulizerOffsetLeft:3,
            openerEqulizerOffsetTop:-1,
            //popup settings
            showPopupButton:"no",
            popupWindowBackgroundColor:"#878787",
            popupWindowWidth:850,
            popupWindowHeight:354
        });
    });
</script>
<script type="text/javascript">var switchTo5x=true;</script>




<style>


body {
       font-family: 'Fjalla One', sans-serif !important;
}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0,0,0,0.9); 
}       
</style>
<style>
.navbar-fixed-top{bottom:0;margin-bottom:0px;border-width:0px 0 0; height:40px !important; border-top-color:Orange  !important; z-index:999; background-color: white !important;};
</style>

<style> body { 
  background: url(../images/background.jpg) fixed; 
  background-color: white !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top:70px;
  margin-bottom:45px;
  color: black !important;
}
input, select, textarea {
color: Black;
}

.navbar-default{
    text-align: center;
    box-shadow: inset 0px 6px 0px #666;    
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: white;
    background-color: #AAA;
    box-shadow: inset 0px 6px 0px #000;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: white;
    background-color: silver;
    box-shadow: inset 0px 6px 0px #ffffff;
}

</style>
</head>


<body>
<ul id="playlists" style="display:none;">
<li data-source="folder:music/011BlueLines" data-thumbnail-path="https://trillumonopoly.com/content/thumbnails/BLuelinesAndBigFaces.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>Blue Lines & Big Faces</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">GENERATE FROM FOLDER</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created from a folder of mp3 files.</p>
    </li>  


   <li data-source="playlist1" data-thumbnail-path="content/thumbnails/large1.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>BLUE LINES AND BIG FACES</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">HTML</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using html elements.</p>
    </li>

    <li data-source="https://soundcloud.com/flipdatent-ceo-t-cartel/t-cartel-panties-drop-radio" data-thumbnail-path="content/thumbnails/large2.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>PANTIES DROP</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">Soundcloud</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>New Single</p>
    </li>

    <li data-source="https://soundcloud.com/flipdatent-ceo-t-cartel/sidebishradio" data-thumbnail-path="content/thumbnails/large2.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>SIDE CHICK</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">SoundCloud</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>New Single</p>
    </li>

    <li data-source="folder:music/001DoinNumbers" data-thumbnail-path="content/thumbnails/large1.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>Doin Numbers</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">XML</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a XML file.</p>
    </li>   

    <li data-source="folder:music/0022PotentAlbum" data-thumbnail-path="content/thumbnails/large1.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>2 Potent Album</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">XML</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a XML file.</p>
    </li>

    <li data-source="folder:music/003PotentAlbum" data-thumbnail-path="content/thumbnails/large1.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>Tha Potent Album</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">XML</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a XML file.</p>
    </li>


<li data-source="folder:music/004DGvol1" data-thumbnail-path="content/thumbnails/large1.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>Divine Grind Vol.1</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">XML</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a XML file.</p>
    </li>

    <li data-source="folder:music/006KeepItG" data-thumbnail-path="content/thumbnails/large1.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>Keep It G</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">XML</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a XML file.</p>
    </li>

    <li data-source="folder:music/007IAmAG" data-thumbnail-path="content/thumbnails/large1.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>I Am A G</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">XML</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a XML file.</p>
    </li>

    <li data-source="folder:music/008GodsHand" data-thumbnail-path="content/thumbnails/large1.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>GodsHand</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">XML</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a XML file.</p>
    </li>

     <li data-source="https://soundcloud.com/ruger_gotti/kilt-dat-at-outta-sight-outta" data-thumbnail-path="content/thumbnails/large3.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>Kilt Dat</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">SOUNDCLOUD</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a SoundCloud playlist URL.</p>
    </li>

    <li data-source="folder:music/009RNL" data-thumbnail-path="content/thumbnails/large1.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>RNL</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">XML</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a XML file.</p>
    </li>

    <li data-source="https://soundcloud.com/flipdatent-ceo-t-cartel/dope-boi-ft-zae-the-godd" data-thumbnail-path="content/thumbnails/large3.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>Dope Boi</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">SOUNDCLOUD</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a SoundCloud playlist URL.</p>
    </li>

    <li data-source="https://soundcloud.com/flipdatent-ceo-t-cartel/t-cartel-millions" data-thumbnail-path="content/thumbnails/large3.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>Millions</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">SOUNDCLOUD</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a SoundCloud playlist URL.</p>
    </li>

    <li data-source="folder:music/010YungNGettinIt" data-thumbnail-path="content/thumbnails/large1.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>Yung N Gettin It</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">XML</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a XML file.</p>
    </li>

    <li data-source="https://soundcloud.com/todd-gotti-594618109/oya" data-thumbnail-path="content/thumbnails/large3.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>OYA</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">SOUNDCLOUD</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a SoundCloud playlist URL.</p>
    </li>

    <li data-source="https://soundcloud.com/todd-gotti-594618109/paparazzi-w-nard-bruno-satelite" data-thumbnail-path="content/thumbnails/large3.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>Paparazzi</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">SOUNDCLOUD</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a SoundCloud playlist URL.</p>
    </li>

    <li data-source="folder:music/005GunsmokeNResin" data-thumbnail-path="content/thumbnails/large3.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>Gunsmoke & Resin</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">FOLDER</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a SoundCloud playlist URL.</p>
    </li>

    <li data-source="https://soundcloud.com/todd-gotti-594618109/beat-it-down-feat-eskimo-eazy" data-thumbnail-path="content/thumbnails/large3.jpg">
        <p class="minimalDarkCategoriesTitle"><span class="bold">Title: </span>Beat It Down</p>
        <p class="minimalDarkCategoriesType"><span class="bold">Type: </span><span class="minimalDarkCategoriesTypeIn">SOUNDCLOUD</span></p>
        <p class="minimalDarkCategoriesDescription"><span class="bold">Description: </span>This playlist is created using a SoundCloud playlist URL.</p>
    </li>

</ul>


      <!--Navigation-->
      <nav class="navbar navbar-default navbar-fixed-top">
               <div class="container-fluid">

                        <div class="col-sm-1 col-md-1"><a href="http://www.trillumonopoly.com/index2.html"><img src="../images/iLLLogo.png"  class="img-responsive hidden-xs hidden-sm "></a></div>

                            <div class="col-sm-10 col-md-10">
                      <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#homenav">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button> 


      </div>


    <div class="collapse navbar-collapse" id="homenav">
<ul class="nav navbar-nav"> 
    <li><a href="pages/main.html" class="menu_nav demo-4">
      <span>
        <span>Home</span>
        <span>-Home-</span>
        <span></span>
      </span>
    </a></li>

          <li> <a href="pages/artist.html" class="menu_nav demo-4">
      <span>
        <span>Roster</span>
        <span>-Roster-</span>
        <span></span>
      </span>
    </a></li>
<li>
 <a href="pages/order.html" class="menu_nav demo-4">
      <span>
        <span>Beats</span>
        <span>-Beats-</span>
        <span></span>
      </span>
    </a>    
           </li> <li>
          <a href="pages/music.html" class="menu_nav demo-4">
      <span>
        <span>Music</span>
        <span>-Music-</span>
        <span></span>
      </span>
    </a>    
           </li>     
            <li>
          <a href="pages/videos.html" class="menu_nav demo-4">
      <span>
        <span>Videos</span>
        <span>-Videos-</span>
        <span></span>
      </span>
    </a> </li>
<li>
<a href="pages/videos.php" class="menu_nav demo-4">
      <span>
        <span>Store</span>
        <span>-Store-</span>
        <span></span>
      </span>
    </a>    
    </li>
    <li>          
               <a href="pages/services.html" class="menu_nav demo-4">
      <span>
        <span>Services</span>
        <span>-Services-</span>
        <span></span>
      </span>
    </a> 
            </li>
            <li>
            <a href="#" class="menu_nav demo-4">
      <span>
        <span>Resources</span>
        <span>-Resources-</span>
        <span></span>
      </span>
    </a>       </li>

    <li>
            <a href="#" class="demo-4 snipcart-checkout">
      <span>
        <span>YOUR CART: </span>
        <span><div class="snipcart-summary"><span class="snipcart-total-price"></span></div></span>
        <span></span>
      </span>
    </a>       </li>


    </ul>

            </div>
                        <div class="col-sm-1 col-md-1"><div class="navbar-right">
                <a href="#" class=""><font color="black" ></span></font></a></span>
            </div></div>




               </div>     
      </nav>
      <!--End Of Navigation-->

    <div class="container-fluid">
        <div class="row" style="background-color: rgba (0,0,0, 0.7)">
                                <center><div class="row" id="contentarea"></div></center>

                                <br>
                                <div class="container" id="footer" style="border-radius:5px; border-color:black; background-color: rgba(255,255,255,.8)">
                                    <div class="col-xs-4 col-sm-4 col-md-4"><h2><font color="Gray">Twitter</font></h2><BR>
                                    <a class="twitter-timeline" href="https://twitter.com/Illumonopoly101" data-widget-id="691098558792142849">Tweets by @Illumonopoly101</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<br>
                                    <BR></div>
                                    <div class="col-xs-4 col-sm-4 col-md-4"><h2><font color="Gray">Facebook</font></h2><BR>
                                        <div class="fb-page" data-href="https://www.facebook.com/foreverdigiempire" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/foreverdigiempire"><a href="https://www.facebook.com/foreverdigiempire">Forever Digi Empi</a></blockquote></div></div><br>
                                    <BR> </div>
                                    <div class="col-xs-4 col-sm-4 col-md-4"><h2><font color="Gray">ACCOUNT</font></h2><BR><BR> </div>
                                </div><br><br><br><br>
            </div>




            </div>
        </div>        



<script src="js/nav.js"></script>

<script language=JavaScript>
<!--


var message="Thats Property iLLumonopoly Global Publishing. Unauthorized Duplication is prohibited";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if 
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers) 
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function("return false")
// --> 
</script>
<script type="text/javascript">stLight.options({publisher: "f497004f-2790-48d8-888b-6fec35fdf757", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<script>
var options={ "publisher": "f497004f-2790-48d8-888b-6fec35fdf757", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "googleplus", "myspace", "pinterest", "blogger", "email", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script> 
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-72805834-1', 'auto');
  ga('send', 'pageview');

</script>


</body>
</html>

这是我的 Ajax 代码：

$( document ).ready(function() {
     $.ajax({
    method: 'GET',
    url: "pages/main.html",
    success: function(content)
    {
        $('#contentarea').html (content);
    }
});
    });



$('.menu_nav') .click (function () {
var href = $(this) .attr('href');
$('#contentarea').hide() .load(href).slideDown( 'very slow' )

    return false;
});

【问题讨论】：

标签： javascript html ajax

【解决方案1】：

你可以这样做：

(function() {
    $('.menu_nav').on('click',function () {
        var href = $(this).attr('href');
        href = href.slice(0, -5); // remove .html so URL is not that ugly
        window.location.hash = href;
        $('#contentarea').hide().load('pages/'+href+'.html').slideDown('very slow');
        return false;
    });

    function hash(){
        var href = window.location.hash.substr(1); // get hash from URL
        if(href){
            $('#contentarea').hide().load('pages/'+href+'.html').slideDown('very slow');
        }else{
            $('#contentarea').hide().load('pages/main.html').slideDown('very slow');
        }
    }

    $(window).bind('hashchange', hash);
    $(document).on('ready', hash);
})();

在 URL 中设置此哈希并在点击时加载该页面。
此外，在哈希更改和页面加载时，它会检查 URL 中是否存在哈希。如果是，它会加载相应的页面，如果不是，它会加载 main.html。
所以您可以像这样链接到所需的页面/哈希，例如 yourdomain.com/index2.html#somepage

【讨论】：

我应该把哈希放在哪里？在页面上？或在代码中？不完全理解这一点....但看起来不错
你只是把它放在你想分享/推广的 URL/链接中。像这样yourdomain.com/index2.html#somepage...你不必把它放在代码中。它是从您的 href 链接生成的
这对我不起作用......我试图将哈希放在链接中，但它不起作用。我是否想命名链接或其他内容....如果我想链接到音乐页面，我应该将哈希放在哪里，例如 a href="pages/music.html" （哈希在 URL 上的位置）是否进入浏览器地址栏 ass mydomain.com/index2.html#music 如果这样对我不起作用
我不知道你是如何实现它的，但对我来说它是有效的。在这里您可以下载我的测试文件w3adventures.com/download/js/jQueryHashTest.zip 另外，请记住，当您在本地尝试时，这不适用于所有浏览器。对我来说，它在 Chrome 中不起作用，但在 Firefox 中起作用。这是由于跨域限制。
我已经按照您发送给我的演示中的方式实现了它，它只是不断重新加载该主页