如何使用 jQuery 在特定位置显示鼠标指针轴时的 Tab

Question

>我有一个锚标签

<li><a href="#inline_content1" class="inline1"  ></a></li>

并将两个<p>标签动态插入到锚标签中

<p>Tab1</p> 

和

<p> Tab2</p>

现在代码显示以下内容：

<li>
     <a href="#inline_content1" class="inline1"  >
         <p>Tab1</p> 
         <p> Tab2</p>
     </a>
</li>  

如果用户单击锚标记，则会显示一个弹出窗口。该弹出窗口有两个选项卡，如果有人单击<p>Tab1</p>，我想在弹出窗口上显示 Tab1，反之亦然。

$('.toggle_social_media ul li a').click(function (e) {
         var x = e.pageX - this.offsetLeft;
         var y = e.pageY - this.offsetTop;              
});
if ((x < 399) && (x > 400)) {
       $('#tab2').show();
}
else {
         $('#tab1').show();
}

我使用鼠标指针单击事件来查找<p>标签的轴，但不幸的是它不起作用。谁能帮我。

谢谢

Answer 1

您可以使用

单击的target并使用数据属性指定选项卡：

jQuery

$('.toggle_social_media ul li a').click(function (e) {        
    e.preventDefault();
    var rel = $(e.target).data('rel');
    $('#' + rel).show();
});

或者，如果您无法更改 html 标记，则可以使用

 var text = $(e.target).text();
 var rel = text.toLowerCase();

改为引用选项卡。

.HTML

<div class="toggle_social_media">
    <ul>
        <li>
            <a href="#inline_content1" class="inline1">
             <p data-rel="tab1">Tab1</p> 
             <p data-rel="tab2"> Tab2</p>
         </a>
        </li>
    </ul>
</div>

演示

参考

。目标

Answer 2

试试这个鼠标悬停或悬停（）

 $('.toggle_social_media ul li a').hover(function (e) {
         var x = e.pageX - this.offsetLeft;
         var y = e.pageY - this.offsetTop;              
    });