学步园

如图所示，想要一个这样的效果，就是点击下面视频标题时，上面的视频跟着切换，但是要求页面不重新加载。

参考文章在这里  

这里贴上部分代码供大家参考。

  <li id="about_li6">
        <h2 id="about_img6"><span>媒体中心</span><img src="images/about_hx.jpg" /></h2>
        <div class="about_sub" id="about_content6">
          <a href="javascript:void(0);" id="back"><img src="images/back.png" /><span>返回</span></a>
          <h3>媒体中心</h3>
          <h4>MEDIA</h4>
          <div class="media_content">
            <div class="media_windows" id="flv1">
       <!---显示视频区域---->
           
            </div>
           <div class="media_list_warp">
              <div class="media_list_content" id="media_list_content">
              <asp:Repeater runat="server" ID="rp_video">
              <ItemTemplate>
              <a href="javascript:void(0);" class='<%#Eval("Description") %>'><%#Display.Tool_CutString(Eval("Title"),25) %></a>
              </ItemTemplate>
              </asp:Repeater>
                
              </div>
            </div>
          </div>
        </div>
      </li>

上面代码是样式代码，上面是视频的显示区域，下面视频标题列表通过repeater来读取，我把读出来的视频地址绑定为a标签的class属性，是为了点击时获取该值。

function about_img6() {
            $("#about_ul li").css("width", "146px");
            $("#media_list_content ul li").css("width", "125px");
            $("#about_ul li h2").fadeIn(500);
            $("#about_ul li h2 span,#about_ul li h2 img").hide();
            $("#about_ul li .about_sub").hide();
            $("#about_ul").animate({ "width": "1045px" });
            $("#about_li1,#about_li2,#about_li3,#about_li4,#about_li5,#about_li7").animate({ "width": "90px" });
            $("#about_li6").animate({ "width": "505px" });
            $("#about_content6").show();
            $("#about_img6").hide();

            var srclist = document.getElementById("media_list_content");
            var firsrc = srclist.getElementsByTagName("a")[0].className;
            //默认加载第一个视频
            setvideo(firsrc);

        };
        $("#media_list_content a").click(function () {
            setvideo($(this).attr("class"));
        });
        ///切换视频方法
        function setvideo(url) {
            var youku = document.getElementById("flv1");
            var htmlstr = "<object  id='obx' name='obx' width='395' height='290'>";
            htmlstr += "<param name='movie' value='" + url + "'></param>";
            htmlstr += "<param name='allowFullScreen' value='true'></param>";
            htmlstr += "<param name='allowscriptaccess' value='always'></param>";
            htmlstr += "<param name='wmode' value='opaque'></param>";
            htmlstr += "<embed src='" + url + "' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' wmode='opaque' width='395' height='290'></embed>";
            htmlstr += "</object>";
            youku.innerHTML = "";
            youku.innerHTML = htmlstr;
        };

此代码是js代码，当点击展开媒体中心时，先获取下面视频标题列表中的第一个a标签中的class属性中的视频地址，然后调用显示视频方法setvideo(url),把获取的地址传过去，然后在页面上打印出object和embed标签，两个标签一起使用的目的是为了兼容各浏览器。

当视频标题被点击时，通过attr来获取当前被点击的a标签的class的值，再调用setvideo(url)方法来在页面上显示相应的视频。

不敢私藏，拿出来与大家分享。