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;
}
我可以通過更改路由映射來獲取網址中的ID: – 2011-03-11 12:33:49
<%:Html.ActionLink(ApexTrackDays.Tools.TruncateString(item.Title,24,ApexTrackDays.TruncateOptions.None),「Index」,「News」,new {id = item.ID},null)%> – 2011-03-11 12:34:29
I新聞頁面的動作結果也做了一些變化: – 2011-03-11 12:35:10