在一個導航下有多個滑塊

所以我有一個導航設置，只要你點擊導航的某個部分，就會出現一個不同的部分。在一個導航下有多個滑塊

我不幸在HTML 4中工作，似乎無法找到正確的滑塊爲此工作。

下面是兩個滑塊id想要完成的圖像，Slider 1是一個產品滑塊，滑塊2是一個包含不同視頻的垂直滑塊。使用我們的CMS，這些都必須是圖片，當您點擊時會更改您在頁面上看到的更大的精選視頻。那麼當您點擊精選視頻時，會彈出一個「PrettyPhoto」視頻並播放。

這是我一直在使用的代碼：

  <!-- + HEADER --> 
      <div class="top-message-container"> 
       <div class="inner-container"> 
        <div class="topHeroImage"> 
         <img src="images/core_head_logo.png" alt="Evans '56 Calftone"> 
         <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 src="images/guitar_bass-icon.png"></a> <a href="#2"><img src="images/percussion-icon.png"></a> <a href="#3"><img src="images/orchestral-icon.png"></a> <a href="#4"><img src="images/woodwinds-icon.png"></a>   
       </div> 


       <div class="main-video-container"> 
        <div class="fret_vids" id="1"> 
         <div class="videoPlayer" id="video1" style="display: none;"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/R3O7if2Koks?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_intro.jpg" alt="Intro Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video2" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/xWbZuje4LAc?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_1.jpg" alt="Round 1 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video3" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/5O2zaA02c_Y?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_2.jpg" alt="Round 2 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video4" style="display:"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4 selected"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/HKYInO4T4T4" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_3.jpg" alt="Round 3 Video"></a> 
          </div> 
         </div> 
        </div> 


        <div class="perc_vids" id="2"> 
         <div class="videoPlayer" id="video1" style="display: none;"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/R3O7if2Koks?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_intro.jpg" alt="Intro Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video2" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/xWbZuje4LAc?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_1.jpg" alt="Round 1 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video3" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/5O2zaA02c_Y?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_2.jpg" alt="Round 2 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video4" style="display:"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4 selected"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/HKYInO4T4T4" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_3.jpg" alt="Round 3 Video"></a> 
          </div> 
         </div> 
        </div> 


        <div class="orch_vids" id="3"> 
         <div class="videoPlayer" id="video1" style="display: none;"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/R3O7if2Koks?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_intro.jpg" alt="Intro Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video2" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/xWbZuje4LAc?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_1.jpg" alt="Round 1 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video3" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/5O2zaA02c_Y?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_2.jpg" alt="Round 2 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video4" style="display:"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4 selected"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/HKYInO4T4T4" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_3.jpg" alt="Round 3 Video"></a> 
          </div> 
         </div> 
        </div> 


        <div class="wood_vids" id="4"> 
         <div class="videoPlayer" id="video1" style="display: none;"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/R3O7if2Koks?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_intro.jpg" alt="Intro Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video2" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/xWbZuje4LAc?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_1.jpg" alt="Round 1 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video3" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/5O2zaA02c_Y?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_2.jpg" alt="Round 2 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video4" style="display:"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4 selected"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/HKYInO4T4T4" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_3.jpg" alt="Round 3 Video"></a> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="prod-slider-container"> 
        <div class="slider_header_text" id="1"><b>LIKE WHAT YOU SAW?</b> Purchase the products seen in the videos.</div>       
       </div> 
      </div> 
      <!-- - END NAVIGATION ... -->

這裏是我一直在使用的CSS：

.page-container { 
position: absolute; 
width: 100%; 
left: 0px; 
} 
.inner-container { 
width: 100%; 
margin: 0 auto; 
text-align: center; 
} 







/* TOP MESSAGE */ 
.top-message-container { 
position: relative; 
width: 100%; 
min-height: 360px; 
//min-height: 655px; 
background-color: #ff0000; 
//background-image: url(images/core_header.jpg); 
background-position: center bottom; 
background-repeat: repeat-x; 
overflow: hidden; 
} 

.topHeroImage { 
position: relative; 
//display: inline-block; 
margin: 0 auto; 
margin-top: 95px; 
//margin-left: -350px;} 


.header_intro_text 
{ 
width: 700px; 
margin: 0 auto; 
padding-top: 40px; 
padding-bottom: 40px; 
font-family: sans-serif; 
color: white; 
//line-height: 24px; 
font-size: 30px; 
letter-spacing: 1px; 
} 


/* VIEW STATUS ... */ 
.navigation-container { 
width: 100%; 
min-height: 610px; 
background-color: #e70000; 
display: inline-block; 
letter-spacing: 1px; 
} 

.navigation-container a 
{ 
color: #ffffff; 
padding-left: 50px; 
padding-right: 50px; 
} 

.navigation-container .inner-container { 
color: #58595b; 
min-height: 50px; 
padding-top: 20px; 
padding-bottom: 20px; 
} 


.main-video-container 
{ 
width: 100%; 
min-height: 611px; 
//background-image: url(images/core_header.jpg);  
background: #ffffff; 
position: relative; 
overflow-x: hidden; 

} 






.fret_vids 
{ 
text-align: center; 
position: absolute; 
//background-color: #000000; 
//height: 610px; 
display: inline-block; 
width:100%;} 

.fret_vids_2 
{ 
    text-align: center; 
    position: absolute; 
    //background-color: #000000; 
    //height: 610px; 
    margin-top: 305px; 
    display: inline-block; 
    width:100%; 
} 


.fret_vids img 
{ 
margin-left: -27px; 
} 

.fret_vids_2 img 
{ 
margin-left: -27px; 
} 


.perc_vids 
{ 
text-align: center; 
left: 100%; 
position: absolute; 
//background-color: red; 
//height: 610px; 
display: inline-block; 
width:100%; 
} 

.orch_vids 
{ 
text-align: center; 
left: 200%; 
position: absolute; 
//background-color: purple; 
//height: 610px; 
display: inline-block; 
width:100%; 
} 

.wood_vids 
{ 
    text-align: center; 
    left: 300%; 
    position: absolute; 
    //color: white; 
    //height: 610px; 
    display: inline-block; 
    width:100%; 
} 


/* VIDEO SECTION ... 
.detailed-reports-container 
{ 
    display: ; 
    width: 100%; 
    min-height: 674px; 
    background-color: #000000; 
    background-position: center bottom; 
    background-repeat: repeat-x; 
    text-align: center; 
} 

.detailed-reports-container .inner-container { 
    width: 970px; 
} 
*/ 

/* PRODUCT SECTION */ 
.prod-slider-container { 
width: 100%; 
min-height: 216px; 
background-color: #ffffff; 
background-position: center top; 
background-repeat: repeat-x; 
text-align: center; 
} 

.slider_header_text 
{ 
font-family: sans-serif; 
padding-top: 15px; 
color: #58595b; 
line-height: 24px; 
font-size: 15px; 
letter-spacing: 1px;  
} 


/*video*/ 

.videoPlayer { 
position: relative; 
width: 970px; 
height: 476px; } 

.video-playlist { 
    position: absolute; 
top: 285px; 
    left: 15px; 
} 


.video-image { 
    position: absolute; 
    top: 42px; 
    left: 408px; 
} 


/*video*/

來源

2016-10-13 Emily Kendall Shortell

你有很多的代碼通過這裏看看。你能把它縮小到相關的代碼嗎？或者更好的是，您可以使用此代碼創建CodePen或JSFiddle，以便我們可以看到它的存在嗎？ – RobertAKARobin

另外，你可以更具體地瞭解什麼是不工作？ – RobertAKARobin

沒問題，會把東西放在一起。 –

的問題是你有多個id的"carousel"。身份證就像社會安全號碼或指紋：它是唯一的。您應該只有一個具有給定ID的元素。如果您發現自己使用許多ID ，請改爲使用class。

問題是你有多種東西，id的"carousel"。身份證就像社會安全號碼或指紋：它是唯一的。您應該只有一個具有給定ID的元素。

如果您發現自己使用了很多ID，請嘗試使用class。你可以在jQuery中用.來選擇這些，和CSS一樣。

例如，使以「mycarousel」的class一切都變成一個旋轉木馬：

<div id="foo" class="mycarousel"></div> 
<div id="bar" class="mycarousel some-optional-other-class"></div>

<script> 
$(".mycarousel").jcarousel("...") 
</script>

來源

2016-10-19 15:37:33 RobertAKARobin

謝謝sooo！我只是修復它，一切正常運作！現在我只需要將所有東西風格化，讓它看起來很漂亮！你一直是一個巨大的幫助和救星！ –

在一個導航下有多個滑塊

回答

相關問題