1

我正在使用jquery進行手風琴菜單,我在主頁上有一個新聞框,當用戶點擊特定的 新聞標題時,它導航到新聞頁面,所有的新聞標題被填充到手風琴菜單的風格,新聞描述被隱藏,當用戶點擊新聞標題以新聞描述以手風琴風格出現時,而所有其他菜單被隱藏,只有 標題可見。我正在尋找的是當用戶點擊主頁上的新聞標題時,只有新聞描述應在新聞頁面上顯示 ,當前所有標題都會顯示,並且描述隱藏在手風琴菜單中,I希望顯示該消息的描述在主頁中被點擊時可見,而所有其他消息標題應當可見而不是描述。 另外我正在使用MVC2。jquery在mvc2中顯示特定消息的手風琴菜單

我只是不知道如何注入jQuery來顯示某些消息這是點擊了網頁,下面是我使用的代碼: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> 

JavaScript的母版頁:

$(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(".")); 
     }); 

    }); 

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; 
} 

回答

0

首先,你必須通過一個額外的參數在請求磨片n用戶從主頁導航到url中的新聞頁面(某些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 +指數在一些隱藏域,並通過獲得的指標有.. 所有最優秀的

+0

我可以通過更改路由映射來獲取網址中的ID: – 2011-03-11 12:33:49

+0

<%:Html.ActionLink(ApexTrackDays.Tools.TruncateString(item.Title,24,ApexTrackDays.TruncateOptions.None),「Index」,「News」,new {id = item.ID},null)%> – 2011-03-11 12:34:29

+0

I新聞頁面的動作結果也做了一些變化: – 2011-03-11 12:35:10