如何突出显示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'); });