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提供宽度，则可以将其设置为以百分比显示在屏幕的右边缘。在这种情况下，您可以为float div提供这些属性width: 20%; left: 80%;。 DISADVANTAGE：您的div的宽度将与屏幕尺寸成比例变化。

这就是定位。然后它仍然无法工作，因为你的js计算从左侧滑出的标签。我猜这里有这个插件：http://www.building58.com/examples/tabSlideOut.html。它完成了这项工作，但它不是那么可扩展。

<强>结论：你需要为这样的函数编写自己的javascript。 但是，为什么在使用CSS时可以使用javascript：hover选择器？

看看这个小提琴：http://jsfiddle.net/TvGQ5/，它完全符合您的要求（如果您真的想要点击而不是悬停，请使用:target选择器。

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

无法在我的页面右侧获得“滑出”选项卡

1 个答案: