2015-05-18 3 views
0

Мне нужно использовать несколько tabSlideOUtsource одну одну из страниц в аналогичным образом, как показано на Fiddle ExampleКак переключать несколько вкладок tabSlideOUt на одной странице

мне нужно переключаться между вкладками и только один должен быть открыт время

$(function() { 
    $('.slide-out-div').tabSlideOut({ 
     tabHandle: '.handle', //class of the element that will be your tab 
     pathToTabImage: 'http://www.gac.com/upload/GAC2012/images/facebook_icon_50x50.png', //path to the image for the tab (optionaly can be set using css) 
     imageHeight: '50px', //height of tab image 
     imageWidth: '50px', //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: '50px', //position from the top 
     fixedPosition: false //options: true makes it stick(fixed position) on scroll 
    }); 


}); 

ответ

0

Я решил эту проблему, внеся некоторые изменения в HTML и с помощью обновленных js для слайдов. использовал js, который находится на скрипке, иначе он может сломаться.

http://fiddle.jshell.net/zy62umw5/1/

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

    <h3>Contact me</h3> 
<a href="mailto:[email protected]">[email protected]</a> 

    <br /> 
    <br /> 
    <p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p> 
    <p>This can be a form to submit feedback, or contact info</p> 
</div> 
<div class="slide-out-div tab2"> <a class="handle" href="http://link-for-non-js-users">Content</a> 

    <h3>Contact me</h3> 
<a href="mailto:[email protected]">[email protected]</a> 

    <br /> 
    <br /> 
    <p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p> 
    <p>This can be a form to submit feedback, or contact info</p> 
</div> 
<div class="slide-out-div tab3"> <a class="handle" href="http://link-for-non-js-users">Content</a> 

    <h3>Contact me</h3> 
<a href="mailto:[email protected]">[email protected]</a> 

    <br /> 
    <br /> 
    <p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p> 
    <p>This can be a form to submit feedback, or contact info</p> 
</div>