个人中心
gpt4 book ai didi

javascript - jquery 从右键菜单中关闭选项卡

转载 作者：行者123 更新时间：2023-12-02 23:03:23 26 4
gpt4 key购买 nike

我正在关闭当前选项卡，关闭另一个选项卡，并通过右键单击选项卡菜单选项关闭所有选项卡功能。我在关闭当前选项卡时遇到困难。该代码可以从右键菜单中执行关闭当前选项卡。但是，当我单击鼠标左键或右键时，在单击我想要关闭的选项卡之前单击任何选项卡。 所有单击的选项卡一起关闭。为什么会出现这种情况以及如何解决？

$(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>

提前致谢。

最佳答案

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

$(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>

关于javascript - jquery 从右键菜单中关闭选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57702910/

26 4 0
文章推荐： javascript - 解压 zip 文件内的船长文件夹
文章推荐： javascript - 在 JS React 中将值从数据库传递到翻转卡
文章推荐： javascript - 忽略向上和向下鼠标按下事件
文章推荐： javascript - 是否可以使用 JavaScript 更改元素的值