如何在包括母版页在内的 Web 表单中突出显示选定的选项卡

Question

我知道没有母版页就像将每个页面的选项卡设置为选中一样简单，但是如何使用母版页做到这一点？

主页

房屋页面（主页标签保持选中状态，即使它位于房屋页面上）

预期输出

我用了下面的教程Highlighting the selected jquery tab using asp.net Master page

母版页

<script type = "text/javascript">
        $(function () {
            $('#scrollToTop').bind("click", function () {
                $('html, body').animate({ scrollTop: 0 }, 1200);
                return false;
            });

            function setCurrentTab(selectedTab) {
                $('li').removeClass('selected');
                $('[id=selectedTab]').addClass('selected');
            }
        });
    </script>

<div id="navigation">
                    <ul>
                        <li id="tab1">
                            <a href="Home.aspx">Home</a>
                        </li>
                        <li id="tab2">
                            <a href="Houses.aspx">Houses</a>
                        </li>
                        <li id="tab3">
                            <a href="About.aspx">About</a>
                        </li>
                        <li id="tab4">
                            <a href="Contact.aspx">Contact</a>
                        </li>
                    </ul>
                </div>

Houses.aspx

<script>
        setCurrentTab('tab2');
    </script>

CSS

#navigation li, #navigation li a:hover, #navigation li.selected a {
    background-image: url(../images/bg-menu.png);
    background-repeat: repeat-x;

Answer 1

替换此代码

$('[id=selectedTab]').addClass('selected');

与

$('[id='+selectedTab+']').addClass('selected'); 

或与

$('#'+selectedTab).addClass('selected');

您在 selectedTab 变量中有您选择的选项卡 ID，但您将其用作文字，因此将此 selectedTab 与 id 连接。

在 Houses.aspx 上，在 document.ready 上调用 setCurrentTab 函数。喜欢

$(function(){ setCurrentTab('tab2'); });