jQuery를 내가 다음 코드를 사용하여 jQuery를 내 자신의 탭을 만들려고하고있는 탭 자체

Question

내부 tabheaders으로 탭을 생성 :

/* tabs */ 
var tabItems = ""; 
var tabList  = ""; 
$(".Tabs .tab").each (
    function(intIndex) { 
      // get tabTitle to create tabNav list 
      $(this).attr("id", "panel_"+intIndex); 
      tabItems += "<li id='tab_"+intIndex+"'>" + $(".tabTitle", this).html() + "</li>"; 
     } 
); 
tabList = "<ul class='tabNav'>"+tabItems+"</ul>"; 
$(".Tabs").prepend(tabList); 

$(".Tabs .tab").each (
    function(intIndex) { 
     $("#tab_"+intIndex).bind("click", function() { 
       $(".Tabs .tab").length; 
       for (i=0;i<=$(".Tabs .tab").length;i++) { 
         $("#panel_"+i).hide(); 
        }        
       $("#panel_"+intIndex).show(); 
     }) 
    } 
); 

나는의 jQuery goeroe 아니다, 그래서 부드러운 주시기 바랍니다.

작업이 코드에 대한 HTML 코드는 다음과 같습니다 (제거)

<div class="Tabs"> 
    <div class="tab"> 
     <div class="tabTitle">tabtitle1</div> 
     tabcontent1 
    </div> 
    <div class="tab"> 
     <div class="tabTitle">tabtitle2</div> 
     tabcontent2 
    </div> 
</div> 

CSS 나는 definitly 그들이하고 정렬되지 않은 목록에 분리되지 제목을 유지하려는

.Tabs { 
    position: absolute; 
    z-index:999;  
} 
.Tabs .tab { 
    position: absolute; 
    display:none; 
    z-index:999;  
    top: 35px; 
    left: 5px; 
    right: 5px; 
    bottom: 5px; 
    background: white; 
} 
.Tabs .tab .tabTitle { 
    display:none; 
    color:white; 
} 
/* Generated clickable tabs */ 
.Tabs ul.tabNav { 
    margin: 0 5px; 
} 

.Tabs ul.tabNav li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: inline; 
    color: #e2e2e2; 
    background: none; 
} 

.Tabs ul.tabNav li a { 
    padding: 3px 10px; 
    margin-left: 2px; 
    border-bottom: none; 
    text-decoration: none; 
    color: #e2e2e2; 
} 

.Tabs ul.tabNav li a:link { 
    color: #e2e2e2; 
} 
.Tabs ul.tabNav li a:visited { 
    color: #e2e2e2; 
} 

.Tabs ul.tabNav li a:hover { 
    color: #e2e2e2; 
    background: #989898; 
    background-image: none; 
} 

.Tabs ul.tabNav li.tabActive a { 
    background-color: white; 
    border-bottom: 1px solid #fff; 
    color: black; 
} 

.Tabs ul.tabNav li.tabActive a:hover { 
    color: #000; 
    background: white; 
    border-bottom: 1px solid white; 
} 

은.

지금까지 그렇게 좋았습니다. 문제는 (지저분한 코드 외에도) 생성 된 tabtitles의 CSS가 작동하지 않는다는 것입니다. 나는 이것을하기 위해 생방송이나 위임을 사용할 수 없다. 나는 추정한다.

누구나 해결책이나 다른 접근 방법이 있습니까?

Answer 1

좋아, 이것이 내가 생각해 낸 것입니다. 앵커를 사용하여 탭의 스타일을 지정하는 것처럼 보입니다. 클릭하면 리디렉션되지만 동일한 페이지에 콘텐츠가 표시되므로 이상합니다. 그래서 이것을 멈추기 위해 href를 #으로 설정했습니다. 여기에 귀하의 제목에 앵커 태그를 추가하고 클릭 한 탭에 클래스를 추가했습니다. 바이올린을 체크 아웃 :

http://jsfiddle.net/gUXyQ/7/

내 두 번째 솔루션은 내가 완전히 앵커를 떨어 뜨, 그리고 아무것도하지 않기 때문에이 CSS를 제압 한 명이있다. 사실 그것은 이전과 같은 색으로 설정 했으므로 처음에는 아무 것도하지 않습니다.

http://jsfiddle.net/EdbhV/1/

.Tabs ul.tabNav li a:link { 
    color: #e2e2e2; 
} 
.Tabs ul.tabNav li a:visited { 
    color: #e2e2e2; 
} 

당신은 앵커의 다른 종속성이있을 수 있지만 내가 사용하려는 것입니다. 귀하의 필요에 가장 적합한 것을 사용하십시오. 도움이 더 필요하시면 저희에게 알려주십시오.