Question

我正在使用引导标签功能，我想实现以下功能：

使用mouseenter而不是单击以在标签之间切换
防止点击链接操作。

这是我的jsfiddle示例代码。 https://jsfiddle.net/irider89/bmLpwtqb/3/

$('.nav li a').hover(function (e) {
    e.preventDefault()
    $(this).tab('show');
});

$('.nav li a').click(function (e) {
    return true;
});

如何实现这一目标？

我需要点击主菜单项（主页，个人资料，消息，设置）并转到特定网址。

Answer 1

请勿使用window.location.href = ...方法！鼠标中键不起作用。

1）切换悬停。在文档对象上绑定一个简单的mouseenter处理程序：

$(document).on('mouseenter', '[data-toggle="tab"]', function () {
  $(this).tab('show');
});

2）防止点击。最好使用.off('click', ...)方法重置Bootstrap内置处理程序，而不是编写处理自定义数据属性的自定义点击处理程序。像这样：

$(document).off('click.bs.tab.data-api', '[data-toggle="tab"]');

然后使用原生href指定外部链接，使用data-target指向内容窗格。

还有一个小型的Bootstrap插件可以自动完成所有：https://github.com/tonystar/bootstrap-hover-tabs。

Demo

Answer 2

使用一些新的＆＃34;数据 - ＆＃34;提到网址的属性，如下所示

function ViewModel(model){
    var self = ko.mapping.fromJS(model);

    self.save = function() {
        var data = ko.toJSON(self);
        $.post("/Licensing/edit", data, function(returnedData) {
            // This callback is executed if the post was successful
        });
    }
    return self;
};

var vm = ViewModel(model);
ko.applyBindings(vm);

并使用像这样的脚本

<a href="#home" aria-controls="home" role="tab" data-toggle="tab" data-href="www.google.com">Home</a>

Answer 3

使用它来获取网址：

$('.nav li a').click(function (e) {
   window.location.href = $(this).attr("href");
});

Answer 4

您只需使用此代码即可实现该功能1，更改悬停时的选项卡

16 - 4

对于下一个功能，请添加此代码以禁用点击

var url = "https://worldcup.playoverwatch.com/en-us/";
HtmlWeb web = new HtmlWeb();
var htmldoc = web.Load(url);
string xpath = "//*[@id=\"roundrobin\"]/div/div/div[1]/div[2]/div[1]/div/div[2]/div[2]/div[1]/div[2]/div";
var node = htmldoc.DocumentNode.SelectSingleNode(xpath);
string innerResult = node.InnerHtml;
Console.WriteLine(innerResult);

Answer 5

试试这个：

//first, we need to show tab-content on mouseover
$(".nav-link").mouseover( function() {
    $(this).tab("show");
});

// on hovering quickly, need to remove the active class from the related tab panel
$(".nav-link").on("show.bs.tab", function(e) {
    const tabPanelId = e.relatedTarget.getAttribute("href");
    $(tabPanelId).removeClass("active");
});

悬停时带有可点击链接的Bootstrap标签

5 个答案:

Demo