[英]ASP.NET Menu Parent Menu Item Highlighting on Hover when Flyouts are enabled
[英]asp.net active menu item highlighting
我有一個母版頁和一些子頁,當我從菜單中打開一個頁面以使其折疊並保持突出顯示時,我希望它具有這種結構
<ul id="menu" class="unstyled accordion collapse in">
<li id="MenuDash" class="accordion-group">
<a data-parent="#menu"
data-toggle="collapse" class="accordion-toggle" data-target="#dashboard-nav">
<i class="icon-dashboard icon-large"></i> Dashboard <span
class="label label-inverse pull-right">2</span>
</a>
<ul class="collapse" id="dashboard-nav">
<li><a href="/Default.aspx"><i class="icon-home"></i> Dash Board</a></li>
<li><a href="/Status.aspx"><i class="icon-bar-chart"></i> Status</a></li>
</ul>
</li> </ul>
所以活動班級是
"active"
而崩潰的班級是
"collapse in"
我在default.aspx
嘗試了此代碼,但沒有成功
<script type="text/javascript">
$('#dashboard-nav').removeClass("collapse");
$('#dashboard-nav').addClass("collapse in");
</script>
如指示的注釋使您的類成為一個單詞名稱,還包裝您的代碼以確保在頁面上的dom元素變臟后執行js。
另外,除了刪除類外,不添加類,請嘗試使用類似以下方法切換類jquery toggle事件 ...
$('#dashboard-nav li').toggle(function() {
alert('First handler for .toggle() called.');
}, function() {
alert('Second handler for .toggle() called.');
});
在每個aspx頁面上使用它。
<script type="text/javascript">
$(document).ready(function () {
$('#dashboard-nav').addClass('selected');
$('.menu li a').hover(function () {
$('.menu li a').removeClass('selected');
$(this).addClass('active');
});
$('.menu li a').mouseleave(function () {
$('#dashboard-nav').addClass('selected');
});
});
</script>
和CSS
.menu li a:hover,.menu li a.selected
{
background-color : #E5E5E5;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
color:Black ! important;
font: normal 12px Trebuchet MS;
}
您可以根據需要進行修改
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.