Question

我已经在＆＃34; JQuery UI标签的标签上添加了一个下拉菜单＆＃34;，总而言之，我的页面如下：

＆＃13;

$( function() {
  $( "#tabs" ).tabs();
} );

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Content of tab 1.</p>
  </div>
  <div id="tabs-2">
    <p>Content of tab 2.</p>
  </div>
  <div id="tabs-3">
    <p>Content of tab 3.</p>
  </div>
</div>

＆＃13;

当用户点击＆＃34;标签2＆＃34;时，我想显示一个包含两个列表项的下拉菜单（＆＃34;标签2＆＃34;以及假设＆＃34;表4＆＃34;）。

如何在JQuery UI标签上添加下拉菜单？我怎样才能添加一个＆＃34;隐藏＆＃34;附加标签？

由于

更新我想要像：

Inception retrain error : tensorflow.python.framework.errors_impl.FailedPreconditionError

Answer 1

以下示例可以帮助您入门。

＆＃13;

$(function() {
  $("#tabs").tabs();

  //Below code hides Tab 4 (#tabs-4)
  $("#tabs").find('a[href="#tabs-4"]').closest('li').hide();

  $('.tabsubmenu li').click(function() {
    $('.tabsubmenu li').removeClass('active');
    $(this).addClass('active');

    if ($(this).text() == 'Sub menu 1')
      $("#tabs").tabs({
        active: 1
      });
    else {
      $("#tabs").tabs({
        active: 3
      });
      $('a[href="#tabs-4"]').closest('li').removeClass('ui-tabs-active ui-state-active');
      $('a[href="#tabs-2"]').closest('li').addClass('ui-tabs-active ui-state-active');
    }
  });
});

＆＃13;

* {
  outline: none;
}

li.tab ul {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #d5d5d5;
  border-radius: 0 0 3px 3px;
}

li.tab:hover ul li {
  color: #454545;
  margin: 0;
  background-color: #e9e9e9;
  padding: 4px 10px;
  cursor: pointer;
  border-bottom: 1px solid #d5d5d5;
}

li.tab:hover ul li:hover,
li.tab:hover ul li.active {
  background-color: #ffffff;
}

li.tab:hover ul {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
}

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li class="tab"><a href="#tabs-2">Tab 2 ▼</a>
      <ul class="tabsubmenu">
        <li>Sub menu 1</li>
        <li>Sub menu 2</li>
      </ul>
    </li>
    <li><a href="#tabs-3">Tab 3</a></li>

    <!-- Below code represents Tab 4 header/link -->
    <li><a href="#tabs-4">Tab 4</a></li>
  </ul>
  <div id="tabs-1">
    <p>Content of tab 1.</p>
  </div>
  <div id="tabs-2">
    <!-- Add the tab content here -->
    <p>Tab 2 : Content of tab 2.</p>
  </div>
  <div id="tabs-3">
    <p>Content of tab 3.</p>
  </div>
  <!-- Below code represents the body of Tab 4 -->
  <div id="tabs-4">
    <p>Tab 4 : Content of tab 4.</p>
  </div>
</div>

＆＃13;

Answer 2

没有本机选项可以这样做，所以我们会使用一些jQuery UI hacks。我们的策略是创建一个jQuery UI菜单元素，它将被隐藏。当用户单击选项卡元素时，我们将显示相对于鼠标指针定位的菜单。

基础HTML

    DataValidation dataValidation = new DataValidation
    {
        Type = DataValidationValues.Date,
        AllowBlank = false,
        ShowErrorMessage = true,
        ShowInputMessage = true,
        ErrorTitle = "Invalid value entered",
        Error = "Please enter a valid date in dd/mm/yyyy format",
        SequenceOfReferences = new ListValue<StringValue> { InnerText = "A2:A10000" },
        Formula1 = new Formula1("1");
        Formula2 = new Formula2("44196");
    };

我们现在创建一个<div id="tabs"> <ul> <li><a href="#tabs-1">Tab 1</a></li> <li><a href="#tabs-2">Tab 2</a></li> <li><a href="#tabs-3">Tab 3</a></li> </ul> <div id="tabs-1"> <p>Content of tab 1.</p> </div> <div id="tabs-2"> <p>Content of tab 2.</p> </div> <div id="tabs-3"> <p>Content of tab 3.</p> </div> </div>元素（http://jqueryui.com/menu/），默认情况下会隐藏它：

menu

使用Javascript：

<ul id="submenu" style="width:150px;display:none;">
  <li><div>Option 1</div></li>
  <li><div>Option 2</div></li>
</ul>

捕获每个标签上的点击事件：

$( function() {
  $( "#tabs" ).tabs();  //initialize the tabs
  $("#submenu").menu(); //initialize the created menu
} );

如果用户在子菜单上选择了某些内容，请将其隐藏

$("a[href^='#tabs']").on("click",function(){

  if ($(this).attr("href")=="#tabs-2"){
    //it is the tab2, show the menu
    $("#submenu").show().position( 
  { my: "left top",
    of: event
    });
  }else{ //is a different tab, hide the menu
    $("#submenu").hide();
  }  
});

检查mi fiddle。

在JQuery UI选项卡上添加下拉菜单

2 个答案: