我正在开发一个网站,当您点击顶部的特定导航时,下面的切片会更改其中的信息。这个片段里面的信息是一个特色视频和一个侧滑块来切换特色视频,下面的一个水平滑块展示产品。
有人可以看看我的代码并告诉我它有什么问题。我一直在拍摄大约2周的麻烦,似乎无法找到解决方案:/
非常感谢
HTML:
<link rel='stylesheet prefetch' href='http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css'>
<link rel="stylesheet" href="core_landing_styles.css">
<link rel="stylesheet" type="text/css" href="product_detail_new-core.css">
<link rel="stylesheet" type="text/css" href="video_new-core.css">
<!-- bxSlider Javascript file -->
<script src="libs/jquery.bxslider.js"></script>
<!-- bxSlider CSS file -->
<link href="libs/jquery.bxslider.css" rel="stylesheet" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<!-- FONTS INCLUSION -->
<link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/d268d308-355f-4fc1-b527-5f948fa77c14.css"/>
<div class="page-container">
<!-- + HEADER -->
<div class="top-message-container">
<div class="inner-container">
<div class="topHeroImage">
<img src="http://assets.daddario.com/core_landing_tst/images/core_head_logo.png" alt="Welcome to Core">
<div class="header_intro_text">Get started by choosing your instrument below</b>.
</div>
</div>
</div>
</div>
<!-- - END HEADER -->
<!-- + NAVIGATION ... -->
<div class="navigation-container">
<div class="inner-container">
<a href="#1"><img class="guit-icon" src="http://assets.daddario.com/core_landing_tst/images/guitar_bass-icon.png"></a> <a href="#2"><img class="drum-icon" src="http://assets.daddario.com/core_landing_tst/images/percussion-icon.png"></a> <a href="#3"><img class="violin-icon" src="http://assets.daddario.com/core_landing_tst/images/orchestral-icon.png"></a> <a href="#4"><img class="sax-icon" src="http://assets.daddario.com/core_landing_tst/images/woodwinds-icon.png"></a>
</div>
<div class="main-video-container">
<!-- + VIDEO PLAYER AND RELATED VIDEOS -->
<div class="video-player-wrapper" id="1">
<div class="video-information">
<div class="video-title">Learn everything you need to know about restringing, humidifying, and even tuning. So<br/>whether behind the scenes or between sets, you can keep your guitar in tip-top shape.</div>
</div>
<div class="youtube-video-player">
<iframe width="736" height="414" src="https://www.youtube.com/embed/EUpEqimZyMM" frameborder="0" allowfullscreen></iframe>
</div>
<div class="side-panel-related-videos">
<img src="images/related_videos_up_arrow.png" alt=""><br />
<ul class="side-panel-list">
<div>
<li>
<div class="side-panel-video-box">
<a href="">
<div class="side-panel-related-video"><img src="http://img.youtube.com/vi/08nwBtS31VU/0.jpg"></div>
<!--<h3>How a Set of Guitar Strings Changed Rock 'n' Roll: The D'Addario Wa...</h3>-->
</a>
</div>
</li>
<li>
<div class="side-panel-video-box">
<a href="">
<div class="side-panel-related-video"><img src="http://img.youtube.com/vi/qzYtGPwK2Ls/0.jpg"></div>
<!--<h3>How to Restring Guitars With a String-Through Body</h3>-->
</a>
</div>
</li>
<li>
<div class="side-panel-video-box">
<a href="">
<div class="side-panel-related-video"><img src="http://img.youtube.com/vi/9Uzy2RtBZeg/0.jpg"></div>
<!--<h3>Guitar Power 2015 ep 2. featuring Nita Strauss</h3>-->
</a>
</div>
</li>
<li>
<div class="side-panel-video-box">
<a href="">
<div class="side-panel-related-video"><img src="http://img.youtube.com/vi/W4P2KOjmvwQ/0.jpg"></div>
<!--<h3>Guitar Power 2015 ep 2. featuring Nita Strauss</h3>-->
</a>
</div>
</li>
</div>
</ul>
<img src="images/related_videos_down_arrow.png" alt="">
</div>
<!-- + PRODUCTS SEEN IN THIS VIDEO -->
<!--<div class="tab-related-products">-->
<h1><b>LIKE WHAT YOU SAW?</b> Purchase the products seen in the videos.</h1>
<ul class="related-products-wrapper bxslider">
<div class="related-products-list">
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
</div>
<div class="related-products-list">
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
</div>
</ul>
<!--</div>-->
</div>
<!-- - VIDEO PLAYER AND RELATED VIDEOS -->
</div>
</div>
<!-- - END NAVIGATION ... -->
<!-- + PLAYERS CIRCLE -->
<div class="push-notifications-container">
<div class="inner-container">
<img class="pc_border_right" src="http://assets.daddario.com/core_landing_tst/images/players_circle_logo.png">
<div class="pc_text">Players Circle is the rewards program that gives musicians more ways to earn free gear, watch exclusive content, and win great prizes. Sign up and start earning points today!</div>
<div class="play_more_text">Play More. Do More. Earn More.</div>
</div>
</div>
<!-- - END PLAYERS CIRCLE -->
<!-- + FOOTER -->
<div class="get-humidipak-container">
<div class="inner-container">
<a href="http://daddario.com/DaddarioHome.Page?ActiveID=2626&sid=a500db6f-f545-4c91-96c7-d1daac6bf4db"><img src="http://assets.daddario.com/core_landing_tst/images/d_brand_logo.png"></a>
<a href="http://www.woodwinds.daddario.com/woodwindsHome.Page?ActiveID=1195&sid=a500db6f-f545-4c91-96c7-d1daac6bf4db"><img src="http://assets.daddario.com/core_landing_tst/images/ww_brand_logo.png"></a>
<a href="http://www.orchestral.daddario.com/OrchestralHome.Page?ActiveID=1191&sid=a500db6f-f545-4c91-96c7-d1daac6bf4db"><img src="http://assets.daddario.com/core_landing_tst/images/orch_brand_logo.png"></a>
<a href="http://www.promark.com/pmHome.Page?ActiveID=3745&sid=a500db6f-f545-4c91-96c7-d1daac6bf4db"><img src="http://assets.daddario.com/core_landing_tst/images/pm_brand_logo.png"></a>
<a href="http://www.puresoundpercussion.com/PSPHome.Page?ActiveID=2391&sid=a500db6f-f545-4c91-96c7-d1daac6bf4db"><img src="http://assets.daddario.com/core_landing_tst/images/ps_brand_logo.png"></a>
<a href="http://www.evansdrumheads.com/EvansHome.Page?ActiveID=1194&sid=a500db6f-f545-4c91-96c7-d1daac6bf4db"><img src="http://assets.daddario.com/core_landing_tst/images/ev_brand_logo.png"></a><br><br>
<div class="copyright_text">Copyright 2016 © D'Addario & Company Inc.</div>
</div>
</div>
<!-- - END FOOTER -->
</div>
<script type="text/javascript" src="core_landing.js"></script>