2012-05-09 31 views
0

我想删除标签而不选择它。当我选择一个标签并删除它。它的工作原理fine.And不选择它它不工作
如何删除标签没有在jquery中选择它

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script> 
</head> 
<body style="font-size:62.5%;"> 

<div id="tabs"> 
    <ul> 
</ul> 
</div> 
<input type='button' id='addTab' value='Add Tab'> 
<input type='button' id='removeTab' value='RemoveTab'> 
</body> 
</html> 

JS:

$(document).ready(function() { 
    $("#tabs").tabs({ 
     tabTemplate: "<li><a href='#{href}'>#{label}</a> <p title='close' id='removeTab' style='cursor:pointer;display:inline'>x</p></li>" 
    }); 
}); 

$(function() { 
    var index = 0; 
    index++; 

    $("#addTab").live('click', function() { 
     index++; 
     var title = 'Tab..... ' + index; 
     var url = '#fragment-' + index; 
     addTab(url, title, index); 
    }); 

    function addTab(url, title, index) { 
     $('#tabs').tabs("add", url, title, [index]); 
    } 

    $('#removeTab').live('click', function() { 
     var $tabs = $('#tabs').tabs(); 
     var selected = $tabs.tabs('option', 'selected'); 
     alert(selected); 
     $('#tabs').tabs("remove", [selected]); 
    }); 
});​ 

JS小提琴http://jsfiddle.net/andrewwhitaker/6VrwD/27/

+0

你想删除哪个标签? – skafandri

回答

1

这是一个工作示例http://jsfiddle.net/k44Wk/即使未选中,也会删除点击的标签。

下面是修改的部分,使事情的作品:

$('#removeTab').live('click', function() { 
    var $tabs = $('#tabs').tabs(); 
    var selected = $tabs.tabs('option', 'selected'); 
    if(selected == -1) 
     selected = $('p[id=removeTab]').index(this); 
    $('#tabs').tabs("remove", [selected]); 
}); 

一件事,你应该避免使用相同ID的多个元素。

1

后,您可以选择第一个选项卡像这样删除:http://jsfiddle.net/6VrwD/28/ 使用我添加的代码可以找出更复杂的逻辑,比如sele如果存在,则选择下一个选项卡。

+0

但是我想删除那个没有选中它的标签 –

1

您可以从单击“x”图标的选项卡抓取href属性,然后使用该属性移除该选项卡。您可以通过执行做到以下几点:

var link = $('a', $(this).parent()).attr('href'); 
$('#tabs').tabs("remove", link); 

的唯一事情是删除按钮具有相同ID为X的图标(你应该避免什么,你可以)现在正在寻找中的第一个元素他的父母(在这种情况下)。最好是删除删除提交或另一个功能来点击那个。

相关问题