Question

我有一个标签式布局，可以在单击选项卡时显示/隐藏部分。我还有一个工具提示功能，当前首次加载页面时，它会在图像映射上加载工具提示。我想更改此设置，以便工具提示仅在单击ID为2的选项卡时显示（＃section2）或当该选项卡处于活动状态时（在链接到url？tab = 2的情况下）。我虽然磕磕绊绊。这是我的代码：

标签点击事件（这会显示基于标签点击的隐藏部分，或者如果您附加？tab = X到网址：

    jQuery(document).ready(function($){
    var sections = $('.section').hide();

    $('.tablink').click(function(e){
        e.preventDefault();
        sections.hide();
        $($(this).attr('href')).show();
        $(this).closest('ul').find('li').removeClass('active');
        $(this).closest('li').addClass('active');
    });

    var tab = getParameterByName('tab');
    if(tab)
       $('.tablink:eq('+(tab-1)+')').click();
    else
        $('#section1').show();  //show first section
});

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

我想要做的是弄清楚如何集成以下工具提示代码，以便在单击选项卡2时触发工具提示：

$("area[title='TITLE NAME']").addClass("active"); //adds active class to specified area

// Create the tooltips only when document ready
$(document).ready(function()
{

       $('area.active').qtip({
   show: {
      ready: true // Show on document load
   },
    position: {
      corner: {
         target: 'center',
         tooltip: 'topMiddle'
      },
      adjust: { x: 4, y: 5 }

   },
        style: {
            name: 'dark', 
            width: 180,
            padding: 3,
             textAlign: 'center',
            border: {
               width:1, 
               radius: 1,
               color: '#fdcf81'
            }, 
            tip: true 
         },
   api: {
      onRender: function(){
         var self = this;
         setTimeout(function(){ self.hide(); }, 50000); // Hide after a minute
      }
   }
});   
});
$("area").removeAttr("title");

以下是标签的HTML：

 <ul class="tablinks">
        <li id="tab1" class="active"><a class="tablink" href="#section1">One</a></li>
        <li id="tab2"><a class="tablink" href="#section2">Two</a></li>
  </ul>

正如您所看到的，这是在文档就绪时触发的。任何建议都会被挪用。我的jQuery在这一点上很可悲，因为我觉得这应该很容易。

谢谢！

Answer 1

重要提示：是的，即使点击事件也必须在就绪区域内。否则，如果在脚本之后加载DOM，则可能会破坏代码。我今天很难学到这一点。作为一种练习，我将始终将我的事件放在文档就绪块中以确保。

$(document).ready(function() 
{
    $("#your_element").click(function(e)
    {
        // safe code goes here
    });
}

Answer 2

好的，我找到了部分解决方案。刚刚在选项卡点击事件中嵌套了工具提示功能：

jQuery(document).ready(function($){
    var sections = $('.section').hide();

    $('.tablink').click(function(e){
        e.preventDefault();
        sections.hide();
        $($(this).attr('href')).show();
        $(this).closest('ul').find('li').removeClass('active');
        $(this).closest('li').addClass('active');
               $('area.active').qtip({
   show: {
      ready: true // Show on document load
   },
    position: {
      corner: {
         target: 'center',
         tooltip: 'topMiddle'
      },
      adjust: { x: 4, y: 5 }

   },
        style: {

            width: 180,
            padding: 3,
             textAlign: 'center',
            border: {
               width:1, 
               radius: 1,
            }, 
            tip: true 
         },
   api: {
      onRender: function(){
         var self = this;
         setTimeout(function(){ self.hide(); }, 50000); 
      }
   }
});   
    });

    var tab = getParameterByName('tab');
    if(tab)
       $('.tablink:eq('+(tab-1)+')').click();
    else
        $('#section1').show();  //show first section



});

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

将jQuery函数从文档准备移动到单击事件

2 个答案: