2013-03-04 2 views
1

У меня есть четыре вкладки. На загрузке открывается только первая вкладка, и когда мы нажимаем на соответствующие флажки, создается соответствующая вкладка, и когда мы снимаем флажок, вкладка будет удалена. Как я могу это сделать это? Мой кодКак скрыть/показать вкладки с помощью jquery

<script> 
    $(function() { 
    $("#tabs").tabs(); 
    }); 
</script> 
<style> 

</style> 
</head> 
<body> 
<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Nithin</a> </li> 
    <li><a href="#tabs-2">Vipin</a></li> 
    <li><a href="#tabs-3">Sachin</a></li> 
    <li><a href="#tabs-4">Ganguly</a></li> 
    </ul> 
    <div id="tabs-1"> 
    <p>Nithin</p> 
    </div> 
    <div id="tabs-2"> 
    <p>Vipin</p> 
    </div> 
    <div id="tabs-3"> 
    <p>Sachin</p> 
    </div> 
    <div id="tabs-4"> 
    <p>Ganguly</p> 
    </div> 
</div> 
<input type="checkbox" name="tabs-1" value="1">tabs-1 
<input type="checkbox" name="tabs-2" value="2">tabs-2 
<input type="checkbox" name="tabs-3" value="3">tabs-3 
<input type="checkbox" name="tabs-4" value="4">tabs-4 
<br> 
</body> 
</html> 

Вы можете проверить свой код от http://jsfiddle.net/2aQ2g/5/

+2

у вас плохой doctype. – Jai

+0

Не имеет значения, но добавьте ярлыки для текста рядом с флажками, я ненавижу, что не могу переключать флажки, нажимая на текст. – qwerty

ответ

2

Вместо того, чтобы удалить закладку, попробуйте скрыть Это.

Вы можете добавить следующий CSS, чтобы он работал.

.ui-state-disabled { 
    display: none; 
} 

Проверить эту скрипку: http://jsfiddle.net/2aQ2g/12/

Конечно, также необходимо будет обрабатывать скрытие соответствующего содержания вкладок, а также.

+0

Здесь, когда я скрываю вкладку, ее содержимое приходит туда. Оно видно. – Niths

0

Половина ответа ..для активировав вкладку на cooresponding Флажок Нажмите

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

    $("input[type=checkbox]").click(function(){ 
     if ($(this).is(':checked')) { 

      $('#tabs').tabs({"selected": parseInt($(this).val()-1),"enabled":parseInt($(this).val()-1) }); 
     } 
     }); 
    }); 
Смежные вопросы