Question

 <div data-role="navbar">
        <ul>
            <li><a id="navBtnThirty" href="@Url.Action("View", "VesselLogs", new { id = @ViewContext.ViewData["VesselGID"], ShowDays = 30})" class="navbarbtn ui-btn-active ui-state-persist">30 Days</a></li>
            <li><a id="navBtnSixty"  href="@Url.Action("View", "VesselLogs", new { id = @ViewContext.ViewData["VesselGID"], ShowDays = 60 })" class="navbarbtn" >60 Days</a></li>
            <li><a id="navBtnNinty" href="@Url.Action("View", "VesselLogs", new { id = @ViewContext.ViewData["VesselGID"], ShowDays = 90 })" class="navbarbtn" >90 Days</a></li>
            <li><a id="navBtnAll" href="@Url.Action("View", "VesselLogs", new { id = @ViewContext.ViewData["VesselGID"], ShowDays = -1 })" class="navbarbtn"  >All Days</a></li>
        </ul>
    </div>

首次加载页面时，活动按钮正确显示。单击其中一个链接后，活动按钮不会设置，直到操作完成，我再次单击该按钮。

Answer 1

字符串语法对我来说不对。我打赌有一些编译错误。在你的href属性标签中，删除里面的双引号，并用单引号替换。

<div data-role="navbar">
    <ul>
        <li><a id="navBtnThirty" href="@Url.Action('View', 'VesselLogs', new { id = @ViewContext.ViewData['VesselGID'], ShowDays = 30})" class="navbarbtn ui-btn-active ui-state-persist">30 Days</a></li>
        <li><a id="navBtnSixty"  href="@Url.Action('View', 'VesselLogs', new { id = @ViewContext.ViewData['VesselGID'], ShowDays = 60 })" class="navbarbtn" >60 Days</a></li>
        <li><a id="navBtnNinty" href="@Url.Action('View', 'VesselLogs', new { id = @ViewContext.ViewData['VesselGID'], ShowDays = 90 })" class="navbarbtn" >90 Days</a></li>
        <li><a id="navBtnAll" href="@Url.Action('View', 'VesselLogs', new { id = @ViewContext.ViewData['VesselGID'], ShowDays = -1 })" class="navbarbtn"  >All Days</a></li>
    </ul>
</div>

修改

完全是我的坏事。我没有想到你的href中有剃刀语法。刚刚注意到'@'符号。

Answer 2

下面的代码解决了这个问题，请务必更改jquery mobile事件以将其绑定到您的特定设置。

    $(document).bind('pageshow', 
    function () {
        var days = @ViewContext.ViewData["ShowLogs"];
        $('.navbarbtn').removeClass("ui-btn-active");
        if (days == 30) {
            $('#navBtnThirty').addClass("ui-btn-active");
        } else if (days == 60) {
            $('#navBtnSixty').addClass("ui-btn-active");
        } else if (days == 90) {
            $('#navBtnNinty').addClass("ui-btn-active");
        } else if (days == -1) {
            $('#navBtnAll').addClass("ui-btn-active");
        }
    });
</script>

JQuery Mobile和ASP.NET MVC导航栏按钮活动状态不起作用

2 个答案: