单击选项卡隐藏选项卡,而不是单击网站的任何部分

时间:2015-03-12 02:08:35

标签: javascript jquery html css tabs

我在此页面上创建了一个支持标签(右侧一个): http://test88.fccbet.com/

这是我获得标签幻灯片效果的地方:http://www.building58.com/examples/tabSlideOut.html

现在,如果您点击网页的任何部分,主要标签会隐藏。我应该添加什么js,这样只有在点击侧边标签时它才会隐藏?

请参阅此图片以了解主标签和侧面标签。 echosantos.com/tabslideout/tab-desired-outcome.jpg

以下是我在此支持标签中使用的代码:

HTML:

<div id="bannerLeft">
<div class="slide-out-div no-phone no-phone-landscape" style="background-image:url(images/support-tab.png); "><br />
<a href="javascript:supportPop('https://messenger.providesupport.com/messenger/043ddykhqw98l0mslsguhu8w79.html');" id="range-logo">Fccbet</a>
<a class="handle" href="#"></a><div id="close-bottom"><img src="@routes.Assets.at("images/close-chat.jpg")"/>
</div>

CSS:

.slide-out-div {
width: 125px; 
height:392px;
background: url(../images/support-tab.png); }


#range-logo {
background-image:url(../images/support-tab.png);
display:block;
text-indent:-9999px;
width: 125px; 
height:396px;} 

JAVASCRIPT:

$(function () { 

$('.slide-out-div').tabSlideOut({
    tabHandle: '.handle', //class of the element that will become your tab
    pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
    imageHeight: '122px', //height of tab image           //Optionally can be set using css
    imageWidth: '40px', //width of tab image            //Optionally can be set using css
    tabLocation: 'left', //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: '200px', //position from the top/ use if tabLocation is left or right
    leftPos: '20px', //position from left/ use if tabLocation is bottom or top
    fixedPosition: false //options: true makes it stick(fixed position) on scroll
});


$('.slide-out-div > .handle').click();

});

提前致谢!干杯!

1 个答案:

答案 0 :(得分:0)

查看jQuery.tabSlideOut插件代码,您可以在此处看到:

https://gist.github.com/katowulf/2655810#file-jquery-tabslideout-1-3-js-L164-L165

document正在侦听隐藏回调菜单的点击事件。

     $(document).click(function(){
        slideIn();
     });

如果您不想使用此功能,我建议您从插件中删除此部分代码。

如果您认为将来可能需要此功能,可以通过向初始化插件时传入的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,
     tabHandleOffset: 0,
     hideOnDocClick: true //new flag to check for doc click hide 
  }, callerSettings||{});

...

然后使用该标志检查是否添加侦听器:

if(settings.hideOnDocClick){
  $(document).click(function(){
     slideIn();
  });
}

...

当您最终初始化插件时,您可以将标记设置为false

$('.slide-out-div').tabSlideOut({
    tabHandle: '.handle', //class of the element that will become your tab
    pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
    imageHeight: '122px', //height of tab image           //Optionally can be set using css
    imageWidth: '40px', //width of tab image            //Optionally can be set using css
    tabLocation: 'left', //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: '200px', //position from the top/ use if tabLocation is left or right
    leftPos: '20px', //position from left/ use if tabLocation is bottom or top
    fixedPosition: false, //options: true makes it stick(fixed position) on scroll
    hideOnDocClick: false //set flag to false - menu does NOT hide when user clicks on doc
});