Question

下面是我的代码，我使用Jquery-Ui-Tabs来创建标签。一切正常，但标签上没有显示关闭图标。如果有任何遗漏，请告诉我。感谢帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <title>Web portal</title>


     <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.3.custom.css">
     <script type='text/javascript' src='script/jquery-1.6.2.js'></script>
     <script type='text/javascript' src='script/jquery-ui-1.10.3.custom.min.js'></script>
     <style>
     #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
     </style>





    <script>
    $(function() {

    var tabs=$('#tabs').tabs();
    tabs.delegate( "span.ui-icon-close", "click", function() {
      var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
      $( "#" + panelId ).remove();
      tabs.tabs( "refresh" );
    });

     });
    </script>





</head>

<body>

    <div id="pageWrap">
    <div id="page_header">
    <h3>UI TABS</h3>
    </div>
    <div id="left">

   </div>
        <div id="right">


        <div id="welcome">
        <div id="tabs">
  <ul>
    <li><a href="#tabs-1">test tab1</a><span class="ui-icon ui-icon-close"></span></li>
    <li><a href="#tabs-2">test tab2</a><span class="ui-icon ui-icon-close"></span></li>
  </ul>
  <div id="tabs-1">
    <p>This is the test tab1....</p>
  </div>
  <div id="tabs-2">
    <p>This is the test tab2....</p>
  </div>

      </div>

      </div>
    </div>
    </div>

</body>

</html>

Answer 1

请检查此demo和Demo 2

<li>
  <a href="#tabs-1">Nunc tincidunt</a>
     <span class='ui-icon ui-icon-circle-close ui-closable-tab'></span>
</li>

Jquery的

$(".ui-closable-tab").live( "click", function() {
    var tabContainerDiv=$(this).closest(".ui-tabs").attr("id");
    var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
    $( "#" + panelId ).remove();
    $("#"+tabContainerDiv).tabs("refresh");
    var tabCount=$("#"+tabContainerDiv).find(".ui-closable-tab").length;
    if (tabCount<1) {
        $("#"+tabContainerDiv).hide();
    }
});

关闭图标没有显示在Jquery-ui-Tabs中

1 个答案: