使用插件的多個選項卡

我正在使用Tab Slide Out jQuery插件：http://wpaoli.building58.com/2009/09/jquery-tab-slide-out-plugin/並嘗試在頁面的不同側製作多個選項卡。我需要一些幫助！當我這樣做時，他們都沒有出現或者根本沒有功能。使用插件的多個選項卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 

<script src="js/jquery.tabSlideOut.v1.3.js"></script> 

<script> 
$(function(){ 
    $('.slide-out-div').tabSlideOut({ 
     tabHandle: '.handle_fist', //class of the element that will be your tab 
     pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab (optionaly can be set using css) 
     imageHeight: '122px', //height of tab image 
     imageWidth: '40px', //width of tab image  
     tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left 
     speed: 300, //speed of animation 
     action: 'click', //options: 'click' or 'hover', action to trigger animation 
     topPos: '200px', //position from the top 
     fixedPosition: false //options: true makes it stick(fixed position) on scroll 
    }); 
    $('.slide-out-div-apps').tabSlideOut({ 
     tabHandle: '.handle_second', //class of the element that will be your tab 
     pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab (optionaly can be set using css) 
     imageHeight: '122px', //height of tab image 
     imageWidth: '40px', //width of tab image  
     tabLocation: 'right', //side of screen where tab lives, top, right, bottom, or left 
     speed: 300, //speed of animation 
     action: 'click', //options: 'click' or 'hover', action to trigger animation 
     topPos: '200px', //position from the top 
     fixedPosition: false //options: true makes it stick(fixed position) on scroll 
    }); 
}); 
</script> 


<style> 
.slide-out-div { 
    padding: 20px; 
    width: 250px; 
    background: #f2f2f2; 
    border: #29216d 2px solid; 
} 

.slide-out-div-apps { 
    padding: 20px; 
    width: 250px; 
    background: #f2f2f2; 
    border: #29216d 2px solid; 
} 
</style> 
</head> 

<body> 
<div class="slide-out-div"> 
     <a class="handle_first" href="http://link-for-non-js-users">Content</a> 

<p>Here you can find all the information you need about Volunteering at the Mary Rigg Neihborhood Community Center. Hover over the main enterance to enter the Community Center. You will be guided through the center using arrows. Check out different volunteer opportunities in each room. Roam the halls as if you were really there!</p> 
    </div> 


<div class="slide-out-div-apps"> 
<a class="handle_second" href="http://link-for-non-js-users">Content</a> 

<p>Here you can find all the information you need about Volunteering at the Mary Rigg Neighborhood Community Center. Hover over the main entrance to enter the Community Center. You will be guided through the center using arrows. Check out different volunteer opportunities in each room. Roam the halls as if you were really there!</p> 
    </div> 
</body> 
</html>

來源

2014-04-18 user3549442

一方面，您的jQuery腳本標記未關閉。你不願意結束標記 –

在FF和IE9中對此進行了測試 - 在兩者中均正常工作。我確實改變了插件的路徑並將其重新命名爲測試 - 所以重新命名爲它應該是的。

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Untitled Document</title> 

    <style> 
    .slide-out-div{ 
    padding: 20px; 
    width: 250px; 
    background: #f2f2f2; 
    border: #29216d 2px solid; 
    } 

    </style> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 
    <script src="tabSlideOut.js"></script> 

    <script> 

    $(document).ready(function(){ 

     $('#slide-out-div1').tabSlideOut({ 
      tabHandle: '.handle1', //class of the element that will be your tab 
      pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab (optionaly can be set using css) 
      imageHeight: '122px', //height of tab image 
      imageWidth: '40px', //width of tab image  
      tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left 
      speed: 300, //speed of animation 
      action: 'click', //options: 'click' or 'hover', action to trigger animation 
      topPos: '200px', //position from the top 
      leftPos: '20px', 
      fixedPosition: false //options: true makes it stick(fixed position) on scroll 
     }); 
     $('#slide-out-div2').tabSlideOut({ 
      tabHandle: '.handle2', //class of the element that will be your tab 
      pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab (optionaly can be set using css) 
      imageHeight: '122px', //height of tab image 
      imageWidth: '40px', //width of tab image  
      tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left 
      speed: 300, //speed of animation 
      action: 'click', //options: 'click' or 'hover', action to trigger animation 
      topPos: '324px', //position from the top 
      leftPos: '20px', 
      fixedPosition: false //options: true makes it stick(fixed position) on scroll 
     }); 
    }); 
    </script> 
    </head> 

    <body> 
    <div id="slide-out-div1" class="slide-out-div"> 
     <a class="handle1" href="http://link-for-non-js-users">Content</a> 
     <p> 
     Here you can find all the information you need about Volunteering at the Mary Rigg Neihborhood Community Center. 
     Hover over the main enterance to enter the Community Center. You will be guided through the center using arrows. 
     Check out different volunteer opportunities in each room. Roam the halls as if you were really there! 
     </p> 
    </div> 


    <div id="slide-out-div2" class="slide-out-div"> 
     <a class="handle2" href="http://link-for-non-js-users">Content</a> 
     <p> 
     Here you can find all the information you need about Volunteering at the Mary Rigg Neighborhood Community Center. 
     Hover over the main entrance to enter the Community Center. You will be guided through the center using arrows. 
     Check out different volunteer opportunities in each room. Roam the halls as if you were really there! 
     </p> 
    </div> 




    </body> 
    </html>

來源

2014-04-18 18:57:35

這很奇怪它仍然不適合我。實際上只有一個工作正好在左側。 – user3549442

您需要確保兩個div都具有滑出式div類。在你的原始代碼中，你有兩個完全相同風格的不同類 - 並且這樣做沒有意義。 –

我的意思是我使用了你提供的代碼，並改變了插件的路徑，它仍然不適合我...... – user3549442

使用插件的多個選項卡

回答

相關問題