无法在页面右侧找到“滑出”选项卡

我有一个滑出选项卡，它在左侧完美工作，但是当我更改设置以将其放置在右侧时 - 选项卡图像消失并且内容卡在打开状态。

在选项卡滑出 DIV 下我有这个 js

$('.slide-out-div').tabSlideOut({

    tabHandle: '.handle',                     //class of the element that will be your tab
    pathToTabImage: 'images/getstarted.gif',  //path to the image for the tab *required*
    imageHeight: '139px',                     //height of tab image *required*
    imageWidth: '27px',                       //width of tab image *required*    
    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: '0px',                            //position from the top
    fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
});

然后有一个js文件有这些设置

(function($){

    $.fn.tabSlideOut = function(callerSettings) {
        var settings = $.extend({
            tabHandle: '.handle',
            speed: 300, 
            action: 'click',
            tabLocation: 'left',
            topPos: '200px',
            leftPos: '20px',
            fixedPosition: false,
            positioning: 'absolute',
            pathToTabImage: null,
            imageHeight: null,
            imageWidth: null,
            onLoadSlideOut: false                   
        }, callerSettings||{});

MY CSS

.slide-out-div {

    padding: 12px;
    width: 220px;
    height: 87px;
    border: 2px inset #1e5e70;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #eefbfe;
    background-image: url(../images/stripe.png);
    background-repeat: repeat;  
    z-index:999;
}

我的网站是http://www.pagetree.co.uk http://www.pagetree.co.uk

Thanks!

没有办法以“正确”的方式做你所要求的事情。 正确的方法是设置滑出（在您的网站上，div 称为float) to right: 0;并调整实际的 javascript 函数（不是您在此处列出的 js，这些是函数参数）。在这些参数中，您可能已经观察到没有rightPos:，这意味着只能从左侧开始设置。

但是，如果您可以提供floatdiv 宽度，您可以设法将其定位到屏幕的右边缘（以百分比为单位）。在这种情况下，您可以为 float div 提供这些属性width: 20%; left: 80%;. 坏处：div 的宽度将与屏幕尺寸成比例地变化。

那是为了定位。但它仍然不起作用，因为你的 js 计算选项卡从左侧滑出。我猜你在这里有这个插件：http://www.building58.com/examples/tabSlideOut.html http://www.building58.com/examples/tabSlideOut.html。它可以完成工作，但可扩展性不太好。

结论：您需要为这样的函数编写自己的 javascript。然而，当你可以使用 CSS:hover 选择器来完成它时，为什么还要使用 javascript呢？

看看这个小提琴：http://jsfiddle.net/TvGQ5/ http://jsfiddle.net/TvGQ5/，它完全达到了您想要的效果（如果您真的想要单击而不是悬停，请尝试使用:target选择器。

如果您使用此解决方案，请不要忘记设置父元素（在您的网站上，div 称为middle to overflow-x: hidden;。此外，它在您的所有页面上都有效，但在您的主页上，您需要将浮动 div 移动到中间 div，而不是主体。