文章/答案/技术大牛

发布

社区首页 >问答首页 >右键单击菜单中的jquery close选项卡

问右键单击菜单中的jquery close选项卡
EN

Stack Overflow用户

提问于 2019-08-29 12:18:01

回答 1查看 66关注 0票数 0

我正在关闭当前选项卡，关闭另一个选项卡，并从右击选项卡菜单选项中关闭所有选项卡功能。我在“关闭当前”选项卡上遇到困难。代码可以从右击菜单中执行关闭当前选项卡。但是，当我用鼠标左键或右键单击任何选项卡时，再单击我想要关闭的选项卡。All the clicked tabs closed together。为什么会发生这种情况，如何解决？

$(document).ready(function() {
  $(".dropdown-menu").hide(100);
  $(document).bind("mousedown", function(e) {
    // If the clicked element is not the menu
    if (!$(e.target).parents(".dropdown-menu").length > 0) {
      // Hide it
      $(".dropdown-menu").hide(100);
    }
  });
  $('#tabs').on("mouseup", "a.tab", function(event) //right click on tab
    {
      switch (event.which) {
        //left-1,center-2,right-3
        case 3:
          //alert('Right Mouse button pressed.');
          $(".dropdown-menu").finish().toggle(100).
          css({
            top: event.pageY + "px",
            left: event.pageX + "px"
          });
          break;
      };
      var tabid = $(this).attr("id");
      //console.log(tabid);
      $('#dropdown-menu a').click(function() {
        var menuchoosed = $(this).attr("id");
        switch (menuchoosed) {
          case 'TabCloseCurrent':
            // remove tab and related content
            $("#" + tabid).remove();
            var contentname = tabid + "_content";
            $("#" + contentname).remove();
            /*
            $(this).parent().remove();
            */
            // if there is no active tab and if there are still tabs left, show the first one
            if ($("#tabs li.active").length == 0 && $("#tabs li").length > 0) {
              // find the first tab    
              var firsttab = $("#tabs li:first-child");
              firsttab.addClass("active");
              // get its link name and show related content
              var firsttabid = $(firsttab).find("a.tab").attr("id");
              $("#" + firsttabid + "_content").show();
            }
            break;
          case 'TabCloseOther':
            break;
          case 'TabCloseAll':
            $("#tabs li").remove();
            break;
        }
      })
      //tabid='';	
    });
})

<!DOCTYPE html>
<html oncontextmenu="return false">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="1.js"></script>
</head>

<body>
  <div class="container">
    <h3>Tabs</h3>
    <ul id="tabs" class="nav nav-tabs">
      <li class="active"><a class="tab" href="#">Home</a></li>
      <li><a id="Menu1" class="tab" href="#">Menu 1</a></li>
      <li><a id="Menu2" class="tab" href="#">Menu 2</a></li>
      <li><a id="Menu3" class="tab" href="#">Menu 3</a></li>
    </ul>
    <br>
    <p><strong>Note:</strong> This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out
      how this can be done.</p>
  </div>
  <ul id="dropdown-menu" class='dropdown-menu'>
    <li data-action="first"><a id="TabCloseCurrent" class="TabCloseCurrent" href="#">Close Tab</a></li>
    <li data-action="second"><a id="TabCloseOther" class="TabCloseOther" href="#">Close Other Tabs</a></li>
    <li data-action="third"><a id="TabCloseAll" class="TabCloseAll" href="#">Close All Tabs</a></li>
  </ul>
</body>

</html>

提前谢谢。

javascript

jquery

html

tabs

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-08-29 12:55:54

每次单击选项卡时，都会为每个选项卡创建单击事件。此外，如果您需要单击，您可以使用$().data引用以下代码段来存储它，并在tabid事件中检索它：

$(document).ready(function() {
  $(".dropdown-menu").hide(100);

  $(document).bind("mousedown", function(e) {
    // If the clicked element is not the menu
    if (!$(e.target).parents(".dropdown-menu").length > 0) {
      // Hide it
      $(".dropdown-menu").hide(100);
    }
  });


  $('#tabs').on("mouseup", "a.tab", function(event) {
    //right click on tab
    switch (event.which) {
      //left-1,center-2,right-3
      case 3:
        //alert('Right Mouse button pressed.');
        $(".dropdown-menu").finish().toggle(100).
        css({
          top: event.pageY + "px",
          left: event.pageX + "px"
        });
        break;
    };

    //var tabid = $(this).attr("id");
    $('#dropdown-menu').data('tabid', $(this).attr("id"));
    //console.log(tabid);
    //tabid='';	
  });

  $('#dropdown-menu a').click(function() {
    var menuchoosed = $(this).attr("id");
    var tabid = $('#dropdown-menu').data('tabid');
    switch (menuchoosed) {
      case 'TabCloseCurrent':
        // remove tab and related content
        $("#" + tabid).remove();
        var contentname = tabid + "_content";
        $("#" + contentname).remove();
        /*
        $(this).parent().remove();
        */
        // if there is no active tab and if there are still tabs left, show the first one
        if ($("#tabs li.active").length == 0 && $("#tabs li").length > 0) {
          // find the first tab    
          var firsttab = $("#tabs li:first-child");
          firsttab.addClass("active");
          // get its link name and show related content
          var firsttabid = $(firsttab).find("a.tab").attr("id");
          $("#" + firsttabid + "_content").show();
        }
        break;

      case 'TabCloseOther':
        break;

      case 'TabCloseAll':
        $("#tabs li").remove();
        break;
    }
    $(".dropdown-menu").hide(100);
  })
})

<!DOCTYPE html>
<html oncontextmenu="return false">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="1.js"></script>
</head>

<body>

  <div class="container">
    <h3>Tabs</h3>
    <ul id="tabs" class="nav nav-tabs">
      <li class="active"><a class="tab" href="#">Home</a></li>
      <li><a id="Menu1" class="tab" href="#">Menu 1</a></li>
      <li><a id="Menu2" class="tab" href="#">Menu 2</a></li>
      <li><a id="Menu3" class="tab" href="#">Menu 3</a></li>
    </ul>
    <br>
    <p><strong>Note:</strong> This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out
      how this can be done.</p>
  </div>


  <ul id="dropdown-menu" class='dropdown-menu'>
    <li data-action="first"><a id="TabCloseCurrent" class="TabCloseCurrent" href="#">Close Tab</a></li>
    <li data-action="second"><a id="TabCloseOther" class="TabCloseOther" href="#">Close Other Tabs</a></li>
    <li data-action="third"><a id="TabCloseAll" class="TabCloseAll" href="#">Close All Tabs</a></li>
  </ul>
</body>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57702910

复制

相似问题

问右键单击菜单中的jquery close选项卡
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问右键单击菜单中的jquery close选项卡EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问右键单击菜单中的jquery close选项卡
EN