ASP.Net Masterpage 및 jQuery가 중복 콘텐츠를 만듭니다.

Question

jQuery 탭이있는 ASP.Net 마스터 페이지가 있습니다.

나는 이런 식으로 설정하는 것을 시도하고있다 :

<div id="tabs"> 
    <ul> 
     <li><a href="Default.aspx">Home</a></li> 
     <li><a href="Settings.aspx"">Settings</a></li> 
     <li><a href="About.aspx">About</a></li> 
    </ul> 
    <div> 
     <asp:ContentPlaceHolder ID="Content" runat="server"> 
     </asp:ContentPlaceHolder> 
    </div> 
</div> 

의 ContentPlaceHolder의 사업부는 jQuery를 탭이 내용을 둘러싸고 만들기 위해 탭 DIV 안에 있습니다.

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

이를 방지하기 위해 내가 할 수있는 일은 무엇인가 : 실제 jQuery를 탭으로이를 돌릴 때 불행히도, jQuery를 마스터 페이지의 모든 콘텐츠를 복제?

Answer 1

문제는 JQuery 탭이 컨텐츠가 페이지에로드 된 세 div의 visibillity를 변경한다는 것입니다. 사용하는 페이지와 다른 페이지가 아닙니다.

그래서 원하는 경우 탭에 JQuery UI를 활용하는 것입니다.

그러면 간단한 방법은 클래스 이름을 li 태그에 복사하고 서버 쪽 논리를 사용하여 활성/비활성 탭의 클래스를 변경하는 것입니다. 나는이 레이아웃을 일관되게하고 싶었고 JQuery UI를 선택하기를 원하는 MVC 솔루션을 위해이 작업을 직접 수행했다. 의 길을 따라

뭔가 :

<li><a href="Default.aspx" class="ui-tabs... ui-... <% 
    if(HttpContext.current.url.contains("Default.aspx"))%><%:ui-active-tab%><% 
    %>" >Home</a></li> 
    <li><a href="Settings.aspx" class="ui-tabs... ui-... <% 
    if(HttpContext.current.url.contains("Settings.aspx"))%><%:ui-active-tab%><% 
    %>" >Settings</a></li> 

구문 메모리에서 기록, 모두 C# 및 클래스 이름. 이 점에 관해선 저에게 용서해주십시오.

희망 귀하의 문제를 바로 잡았습니다.

Answer 2

는 내가 jQuery를 UI 탭 플러그인에 익숙하지 않은,하지만 난이 documentation에서 보는 것과, 당신은 탭 당 사업부가 있어야하고, 앵커는 개인 된 div의 id의 링크해야합니다

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
     <li><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 
    </div> 
    <div id="tabs-3"> 
     <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 
     <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 
    </div> 
</div> 

당신은 단지 하나의 div가있는 것 같습니다 ... 나는 이것이 당신이 어떻게 작동하는지보고 싶지 않습니다.

Answer 3

나는 Erlend D로이 사이트를 프로그래밍하고 있습니다. 문제는 탭을 페이지의 기본 메뉴로 설정하여 마스터 페이지를 사용하는 것입니다. 마스터 페이지의 "하위"를 해당 div에 어떻게 통합합니까?

예 : one.aspx, two.aspx 및 three.aspx 페이지가 있고 마스터 페이지의 jqueryui 탭이 해당 페이지에 연결되기를 원할 경우 어떻게합니까?