Question

这与此处的问题类似：Why are my cookie settings not being applied?

我知道这很糟糕，但我还没有找到另一种方法来实现这一目标 - 我想读取一个cookie，并根据cookie val（“true”或“false”）切换标签的可见性或off，使用Razor / C＃，HTML和jQuery的组合。

我想到的是使用Razor代码将div的“title”属性基于该属性，然后在jQuery中读取该属性val以设置可见性val，如下所示：

剃刀：

string selectTwitterCookie = Request.Cookies["selectTwitter"].Value;

HTML：

<div id="duckbilledPlatypusTab-Twitter" title=@selectTwitterCookie>

jQuery的：

if ($("#duckbilledPlatypusTab-Twitter").title == "true") {
    $("#duckbilledPlatypusTab-Twitter").visible("visible");
} else {
    $("#duckbilledPlatypusTab-Twitter").visible("not visible");
}

......当然，“不可见”不是我真正需要的。我宁愿更直接地编码它，例如：

($("#duckbilledPlatypusTab-Twitter").title == "true") ?  $("#duckbilledPlatypusTab-Twitter").visible("visible") : $("#duckbilledPlatypusTab-Twitter").visible("invisible");

有人知道如何做到这一点吗？

更新

好的，另一个奇怪的情况。查看CDT中的值，我看到所有选项卡都具有相同的类（“ui-tabs-anchor”）：

<a href="#duckbilledPlatypusTab-Twitter" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Twitterpated</a>
<a href="#duckbilledPlatypusTab-Bing" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Bingo</a>

...所以他们的html似乎没有受到我在代码中添加的class =“display- @ WhateverCookie”的影响：

<div id="duckbilledPlatypusTab-Twitter" class="display-@TwitterCookie">

...但是，添加该类的人不会在他们的iframe中显示任何内容 - 除了Twitter; Twitter工作得很好......所以，它又回到了编码板*，虽然有时它感觉更像是一个Ouija板或草案板。

演唱Merle Haggard的“回到酒吧”的旋律。

更新2

将其更改为允许iframe再次运行：

class="display-"+@BingCookie

（而不是class =“display- @ BingCookie”）

但有趣的是 - CDT似乎还没有意识到即时创建的课程。

更新3

奇怪......甚至在为html添加标题之后：

<div id="duckbilledPlatypusTab-BingSearch" style="min-height: 50vh" title="Bla" class="display-"+@BingCookie>

...这就是jQuery ready方法的结尾：

if ($("#duckbilledPlatypusTab-Bing").attr('title') == "true") {
    $("#duckbilledPlatypusTab-Bing").css('display', 'block');
} else {
    $("#duckbilledPlatypusTab-Bing").css('display', 'none');
}

...标签仍然可见。

CDT将该元素视为：

<div id="dynaMashTab-Bingo" style="min-height: 50vh;" title="bla" class="display- ui-tabs-panel ui-widget-content ui-corner-bottom" +@bingocookie="" aria-labelledby="ui-id-4" role="tabpanel" aria-expanded="true" aria-hidden="false"></div>

IOW，“阶级”宣言看起来很古怪......

Answer 1

在jQuery中使用.css()方法并为元素设置display，您必须使用.attr()方法获取属性：

if ($("#duckbilledPlatypusTab-Twitter").attr('title') == "true") {
    $("#duckbilledPlatypusTab-Twitter").css('display', 'block');
} else {
    $("#duckbilledPlatypusTab-Twitter").css('display', 'none');
}

参考文献：

.css() - jQuery API文档
.attr() - jQuery API文档

TIP

但是，实际上不需要在这里使用jQuery，你可以使用模板引擎（Razor）来实现。像这样：

<div id="duckbilledPlatypusTab-Twitter" class="display-@selectTwitterCookie">

在您的CSS中，您将拥有：

.display-true { display: block; }
.display-false { display: none; }

Answer 2

解决方案1：

if ($("#duckbilledPlatypusTab-Twitter").attr('title') === "true") {
    $("#duckbilledPlatypusTab-Twitter").show();
} else {
    $("#duckbilledPlatypusTab-Twitter").hide();
}

解决方案2：

if ($("#duckbilledPlatypusTab-Twitter").attr('title') === "true") {
    // Can use hidden OR display-none based on your requirement
    $("#duckbilledPlatypusTab-Twitter").removeClass("hidden");
} else {
    // Can use hidden OR display-none based on your requirement
    $("#duckbilledPlatypusTab-Twitter").addClass("hidden");
}

CSS：

.hidden {visibility: hidden !important;} 
.display-none {display: none !important;}

注意：希望你这样做是$（document）.ready（）的一部分，或者是另一个可以使用selectTwitterCookie值并且DOM准备就绪的地方。

我可以根据标题切换选项卡的可见性吗？

更新

更新2

更新3

2 个答案:

TIP