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

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

How to highlight selected tab in Web Forms including Master Page

jquery

css

asp.net

webforms

master-pages