如何在一页上切换多个 tabSlideOUT 选项卡

Posted 2023-02-23

【中文标题】如何在一页上切换多个 tabSlideOUT 选项卡

【英文标题】：How to toggle multiple tabSlideOUt tabs on one page

【发布时间】：2015-05-18 04:32:47

【问题描述】：

我需要使用多个tabSlideOUtsource其中一个页面，其方式与Fiddle Example中所示类似

我需要在标签之间切换，一次只能打开一个

 $(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
     );


 );

【参考方案1】：

我通过对 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:[e-mail]">[e-mail]</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:[e-mail]">[e-mail]</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:[e-mail]">[e-mail]</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>