Javascript 在保留旧静态页面的同时具有动态内容

我有一个视频标题列表。每个页面都有相关视频和一些信息（播放器、描述、讨论等）

我想用Javascript/JQuery使事情变得更加动态。屏幕一分为二，左侧为视频列表，右侧为信息

<a href="javascript: PlayVideo(123);">Title 1</a>

但我仍然希望为没有javascript的人和搜索引擎爬虫保留旧的链接

这是个好主意吗

<a href="/Video/title-1" videoid="123">Title 1</a>

并使用JQuery循环所有锚点以获取videoid并替换href

---

（服务器端是asp.net mvc，javascript和静态端已经可以使用了）

您可以使用框架集，可以与每个浏览器一起使用。这是一种很老的方法，但它不依赖于Javascript，因此可以满足您的需求

<frameset cols="25%,*">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
</frameset>

---

作为您的参考

简短回答，您可以使用iFrame实现您想要的。将屏幕分为两个分区，左分区存储链接，右分区存储iframe和视频播放器

->完整css

<div id="container">
    <div id="videoList">
        <a href='http://www.dailymotion.com/video/xzvsp7_joe-jack-the-mogul-mulla_music#.UZMPerUwpuA' target="video">Video 1</a><br/>
        <a href='http://www.dailymotion.com/video/xzu16h_daft-punk-random-access-memories-unboxed_music#.UZMPRbUwpuA' target="video">Video 2</a><br/>
    </div>
    <div id="videoPlayer">
        <iframe id='video' src=""></iframe>
    </div>
</div>

如果您正在寻找完整的AJAX/jQuery解决方案，则需要一个播放器（flowplayer、jwplayer）等

<div id="container">
    <div id="videoList">
        <a href='http://www.dailymotion.com/video/xzvsp7_joe-jack-the-mogul-mulla_music#.UZMPerUwpuA' target="video">Video 1</a><br/>
        <a href='http://www.dailymotion.com/video/xzu16h_daft-punk-random-access-memories-unboxed_music#.UZMPRbUwpuA' target="video">Video 2</a><br/>
    </div>
    <div id="videoPlayer">
        <iframe id='video' src=""></iframe>
    </div>
</div>