показать/скрыть вкладки на основе выбора флажка

Question

У меня есть 4 вкладки на одной странице JSP. Скажем, Tab 1, Tab2, Tab3, Tab4. Изначально Tab1 включен, пользователь может свободно выполнять свою работу в Tab1, но другие вкладки (Tab2, Tab3, Tab4) отключены, что означает, что когда пользователь нажимает Tab2 или Tab3 или Tab4, то он не может видеть содержимое этих вкладок. Флажок находится на моей первой вкладке, т.е. Tab1, если пользователь будет проверять этот флажок, тогда Tab2 будет включен, и содержимое Tab2 будет видимым для пользователя, и в это время пользователь также может просматривать содержимое Tab1, поэтому две вкладки (Tab1 и Tab2) теперь включены, когда пользователь нажимает Tab1, тогда он/она может выполнять любую операцию над содержимым Tab1, и если он/она нажмет на Tab2, то, как и Tab1, он может выполнять любую операцию над содержимым Tab2 (как две вкладки в браузере), но содержимое Tab3 и Tab4 отключено, пока пользователь не проверит другие два флажка, присутствующие в Tab1. Теперь, если пользователь входит в Tab1 и отменяет второй флажок, Tab2 будет отключен, и пользователю будет запрещено видеть содержимое Tab2. Как это сделать в jquery/javascript/ajax/css/любыми способами?

Любая помощь очень ценится.

Answer 1

попробуйте эту ссылку

http://www.barelyfitz.com/projects/tabber/

надеюсь, что это поможет вам ..

, кстати, это также хороший материал

http://docs.jquery.com/UI/Tabs

Answer 2

Посмотрите на JSFiddle Live Demo он должен вы найдете неплохой пример для начала, вкратце, что вам нужно сделать, когда пользователь нажимает s на элемент, вы хотите, чтобы скрыть все вкладки, и показывать только одну, соответствующую вашим потребностям, вот надрез кода:

var tabids = ["tab-1", "tab-2", "tab-3"]; 

function showtab(index) { 
    var i; 
    for (i = 0; i < tabids.length; i++) { 
     $("#" + tabids[i]).hide(); 
    } 
    $("#" + tabids[index]).show(); 
} 

, как вы можете видеть, я определил массив, которые содержат идентификаторы вкладок, которые мне нужно показать/скрыть.

EDIT: Пожалуйста, обратите внимание на JSFiddle Live Demo Take #2

Answer 3

Я думаю, что это решит вашу проблему,

Она валидации на флажки, чтобы продолжить со следующими вкладками.

http://flowplayer.org/tools/demos/tabs/wizard.html