在 asp.net 母版页中使用 Css 类使 jquery 选项卡可见和不可见的问题答案

【问题标题】：Problem in making a jquery tab visible and invisible with Css class in asp.net master page在 asp.net 母版页中使用 Css 类使 jquery 选项卡可见和不可见的问题
【发布时间】：2018-07-03 20:08:27
【问题描述】：

我在我的 asp.net 母版页上设置了如下的 jquery 选项卡。

<ul>            
                    <li <%= Session["CurrentTab"] == "Firsttab" ? "class=\"current\"" : "" %>><a href="First.aspx">First</a></li>
                    <li <%= Session["CurrentTab"] == "Secondtab" ? "class=\"current\"" : "" %>><a href="Second.aspx">Second</a></li>
                    <li <%= Session["CurrentTab"] == "Thirdtab" ? "class=\"current\"" : "" %>><a href="Third.aspx">Third</a></li>
                    <li <%= Session["CurrentTab"] == "Fourthtab" ? "class=\"current\"" : "" %>><a href="Fourth.aspx">Fourth</a></li>
                    <li id="bsearch" style="margin-left:500px" class=<%= Session["CurrentTab"] == "Fifthtab" ? "current" : "hide" %>><a href="Fifth.aspx">Fifth <asp:Literal ID="Lblcount" runat="server" Visible="false"></asp:Literal><span id="removebtn" class="removetab ui-icon ui-icon-circle-close" style="float:right; margin: -2px -10px 0px 3px; cursor:pointer;"></span></a></li>

                </ul>

这些选项卡在 jquery ajax 模式下工作。我正在将 First.aspx,Second.aspx,Third.aspx,Fourth.aspx,Fifth.aspx 页面的页面加载中的 session["CurrentTab"] 值设置为相应的值.基于此值，在该特定页面上单击时会突出显示相应的选项卡。默认情况下，前 4 个选项卡（第一、第二、第三、第四）将是可见的，而第五个选项卡是不可见的。

我在母版页上有一个搜索按钮，从任何页面单击该按钮都会将用户重定向到 Fifth.aspx，在此我也使第五个选项卡可见。

这第五个标签应该可以在点击标签标题旁边的“x”时关闭。

一旦第五个选项卡可见，除非用户单击“x”，否则它应该与所有页面上的其他选项卡一起保持可见（First.aspx、Second.aspx、Third.aspx、Fourth.aspx、Fifth.aspx）。 aspx)。但是目前如果我离开第五个.aspx 页面并导航到其他页面，“第五”选项卡将变得不可见，因为会话 [“CurrentTab”] 不再设置为“第五选项卡”，并且该选项卡根据 @ 被隐藏987654322@ 我正在为此选项卡编写的会话。

我想用这样的东西替换类

 class=<%= Session["CurrentTab"] == "Fifthtab" ? "current" : "default" %>

其中'default'对应于style="display:block";

我尝试使用 javascript 在母版页的搜索按钮单击中执行此操作，但它不起作用。

有人可以帮我实现吗？

谢谢。

【问题讨论】：

标签： asp.net jquery tabs

【解决方案1】：

一种方法是使用隐藏字段来保存第五个选项卡的状态。因此，只要第五个选项卡可见，就设置隐藏变量。同样，当用户单击 x 按钮时，设置变量。

您可以访问名为“hdnFifthTabStatus”的隐藏变量

$('input[id$="hdnFifthTabStatus"]').val();

现在如果这是真的：将 display:block 添加到第五个选项卡 css，否则添加 display:none。

【讨论】：

正如你所提到的，我会在第五个选项卡可见时立即设置隐藏字段，但是我如何检查它是否存在于其他页面（第一、第二、第三、第四）上以设置第五个标签的css，第五页上的bcoz应该有'当前'cssclass，在所有其他页面上它应该有'默认'类，除非点击'x'？
由于其他页面有一个共同的母版页，每个页面都应该有一个单独的隐藏字段。您可能会考虑在服务器端为活动选项卡保留一个静态变量。在回发时相应地设置隐藏字段。
不要使用静态。您可以在会话中保留活动选项卡。

【解决方案2】：

这显然真的很晚了，但这是我最近使用的一个简单技巧。

所以你可以通过简单地使用 CSS Display 属性来实现隐藏标签。

display: none;

在列表元素中使用内联样式绰绰有余。

<li style="display:none;"><a href="SomeTargetView">Example</a></li>

现在让我们定义将链接到 JavaScript 函数的搜索按钮。这个功能反过来会激活你的标签。

这是您的搜索按钮的代码：

<a href="javascript:;" onclick="tabActivator()" class="some button classes">Edit my profile</a>

现在，为了实现特定标签的点击激活，我们可以编写一个小的 JavaScript 函数。

function tabActivator(){
    $("#tabs").tabs("option", "active", 4);
    return false;
}

这里我们激活从 0 开始计数的第 5 个选项卡，因此是 4。

所以对于你的具体情况，我猜按钮和 JS 函数是提供的，但列表看起来像这样：

<ul>
    <li <%= Session["CurrentTab"] == "Firsttab" ? "class=\"current\"" : "" %>><a href="First.aspx">First</a></li>
    <li <%= Session["CurrentTab"] == "Secondtab" ? "class=\"current\"" : "" %>><a href="Second.aspx">Second</a></li>
    <li <%= Session["CurrentTab"] == "Thirdtab" ? "class=\"current\"" : "" %>><a href="Third.aspx">Third</a></li>
    <li <%= Session["CurrentTab"] == "Fourthtab" ? "class=\"current\"" : "" %>><a href="Fourth.aspx">Fourth</a></li>
    <li style="display:none;"<%= Session["CurrentTab"] == "Fifthtab" ? "class=\"current\"" : "" %>><a href="Fifth.aspx">Fifth</a></li>
</ul>

隐藏和显示搜索框的代码可以使用上面提供的相同函数中的一些 JavaScript 来完成。

也许您不再需要这个答案，但任何想要从标签中激活隐藏标签的人都可以这样做。

【讨论】：