在我的页面右侧找不到滑出选项卡

Question

我有一个滑出式标签，它在左边工作得很好，但当我改变设置将它放在右边时-标签图像消失了，内容保持打开。

在选项卡滑出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||{});

我的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

谢谢!

Answer 1

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

但是，如果您可以给float div一个宽度，您可以设法将其定位到屏幕的右边缘，以百分比为单位。在这种情况下，您应该为浮动div提供这些属性width: 20%; left: 80%;。的缺点：你的div的宽度会随着屏幕尺寸的不同而不同。

这是为了定位。尽管如此，它还是不能工作，因为你的js会计算出从左边滑出的标签。我猜你在这里有这个插件：http://www.building58.com/examples/tabSlideOut.html。它可以完成这项工作，但它的可扩展性不是很好。

结论：你需要为这样的函数编写你自己的javascript。但是，既然可以使用CSS:hover选择器，为什么还要使用呢？

看看这个小提琴：http://jsfiddle.net/TvGQ5/，它完全达到了你想要的效果(如果你真的想点击而不是悬停，那就玩玩:target选择器吧。

如果您使用此解决方案，不要忘记设置父元素(在您的网站上，名为middle的div设置为overflow-x: hidden;。而且，在你所有的页面上它都可以工作，但是在你的主页上，你需要把浮动的div移到中间的div，而不是正文。