Jquery 특정 뉴스를 표시하는 mvc2의 아코디언 메뉴

Question

아코디언 메뉴에 jquery를 사용하고 있습니다. 내 홈페이지에 뉴스 상자가 있는데 사용자가 특정 뉴스 제목을 클릭하면 뉴스 페이지로 이동합니다. 뉴스 제목은 아코디언 메뉴의 스타일로 채워지고, 뉴스 설명은 숨겨집니다. 사용자가 뉴스 제목을 클릭하면 아코디언 스타일로 나오며 모든 다른 메뉴는 숨겨지며 제목 만 보입니다. 내가 찾고있는 것은 사용자가 홈 페이지의 뉴스 제목을 클릭하면 해당 뉴스 설명 만 뉴스 페이지에 표시되어야하며 현재 모든 제목이 표시되고 설명은 아코디언 메뉴에 숨겨져 있습니다. 다른 모든 뉴스 제목이 설명이 아닌 표시되어야하는 동안 홈 페이지에서 클릭 한 해당 뉴스의 설명을 표시하려고합니다. 또한 MVC2를 사용하고 있습니다. news.aspx

<div id="accordion"> 
    <% foreach (var item in Model) 
    { %> 
     <h3 class="first"> 
      <span class="left"><a href="#"> 
      <%: item.Title %></a></span> 
      <span class="green2 right"> 
      <%: String.Format("{0:dd.MM.yy}", item.DateAdded) %></span> 
     </h3> 
     <div class="accor_cnt"> 
      <div class="text"> 
       <p class="green2 title"> 
        <%: item.Title %> 
       </p> 
       <img src="/content/images/structure/newsdivider.gif" alt="" class="newsdivider" /> 
       <p class="description"> 
        <%: item.Article %> 
       </p> 
      </div> 
      <!--END description--> 
      <div class="newsMainimage"> 
       <img src="/content/images/content/<%: item.ImageLarge %>" alt="" /> 
      </div> 
      <!--END newsMainimage--> 
      <div style="clear: both;"></div> 
     </div> 
     <!--END accor_cnt --> 
    <% } %> 
</div> 

자바 스크립트 마스터 페이지 :

$(document).ready(function() { 

     //When page loads... 
     $(".tab_content").hide(); //Hide all content 
     $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
     $(".tab_content:first").show(); //Show first tab content 


     //On Click Event 
     $("ul.tabs li").click(function() { 

      $("ul.tabs li").removeClass("active"); //Remove any "active" class 
      $(this).addClass("active"); //Add "active" class to selected tab 
      $(".tab_content").hide(); //Hide all tab content 

      var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
      $(activeTab).fadeIn(); //Fade in the active ID content 
      return false; 
     }); 



     $("#accordion").accordion({ 
      active: false, 
      collapsible: true, 
      autoHeight: false 
     }); 

     //FUNCTION FOR SUB ROLLOVER MENU 
     $(".monthlybtn img").hover(function() { 
      $(this).attr("src", $(this).attr("src").split(".").join("-hover.")); 
     }, function() { 
      $(this).attr("src", $(this).attr("src").split("-hover.").join(".")); 
     }); 

    }); 

는 난 그냥 홈페이지에서 클릭 된 특정 뉴스를 표시하는 jQuery를 주입하는 방법을 몰라

는 아래 내가 사용하고있는 코드입니다

CSS는 :

ul.tabs { 
    margin: 0; 
    padding: 0; 
    float: left; 
    list-style: none; 
    height: 20px; /*--Set height of tabs--*/ 
    width: 357px; 
} 
ul.tabs li { 
    float: left; 
    margin: 0; 
    padding: 0; 
    height: 20px; /*--Subtract 1px from the height of the unordered list--*/ 
    line-height: 20px; /*--Vertically aligns the text within the tab--*/ 
    /*border: 1px solid #999; place divider here*/ 
    border-left: none; 
    margin-bottom: 0px; /*--Pull the list item down 1px--*/ 
    overflow: hidden; 
    position: relative; 
} 
ul.tabs li a { 
    text-decoration: none; 
    color: #fff; 
    display: block; 
    font-size: small; 
    padding: 0px 10px; 
    /*border: 1px solid #56DB00; --Gives the bevel look with a 1px white border inside the list item--*/ 
    outline: none; 
} 
ul.tabs li a:hover { 
    /*background: #ccc;*/ 
} 
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ 
    background: #56DB00; 
    /*border-bottom: 1px solid #56DB00;*/ /*--Makes the active tab look like it's connected with its content--*/ 
} 


.tab_container { 
    border:1px #525453 solid; 
    overflow: hidden; 
    clear: both; 
    float: left; width:357px; 
    margin-top:5px; 
    background:url(/content/images/structure/upcoming_bg_trans.png) repeat; 
} 
.tab_content { 
    padding: 5px; 
    font-size: 11px; 
} 

Answer 1

먼저 당신이 요청 갔지에 추가 매개 변수를 전달해야합니다 n 사용자가 홈페이지에서 뉴스 페이지로 이동합니다 (일부 id). 아코디언에서 해당 뉴스 색인의 색인을 찾아 내야합니다. 활성 .. 여기

는 ..

$(document).ready(function(){ 
     var newsID = getParameterByName("newsID"); 
     var newsIndex = getNewsIndesByID(newsID); 
     //this you'll have to figure out 
     $("#accordion").accordion({ 
      active: false, 
      collapsible: true, 
      autoHeight: false, 
      active:newsIndex 
     }); 
     }); 

function getParameterByName(name) {  
     name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); 
     var regexS = "[\\?&]" + name + "=([^&#]*)"; 
     var regex = new RegExp(regexS); 
     var results = regex.exec(window.location.href); 
     if (results == null) 
     return ""; 
     else 
     return decodeURIComponent(results[1].replace(/\+/g, " "));  
}` 

당신은 몇 가지 숨겨진 필드에 뉴스의 ID + 인덱스를 저장 고려하여이 인덱스를 얻을 수 있습니다 .. 모든 최고의

몇 가지 코드