html 动态控制显示隐藏,使用swatch / HTML 5显示/隐藏HTML - 动态HTML(Show / Hide HTML using swatch / HTML 5 - dynamic H...

使用swatch / HTML 5显示/隐藏HTML - 动态HTML(Show / Hide HTML using swatch / HTML 5 - dynamic HTML)

我在模板中实现了一个swatch CSS。

ONE

TWO

因此，当用户点击按钮“ONE”时，它会被选中并且“TWO”被取消选择，反之亦然

此时一切都很好。

但是现在我想在所选按钮的基础上显示/隐藏表格让我说如果选择了一个我想要显示Id =“TblSpec_ONE”的表并隐藏所有其他表，反之亦然

。 相同的HTML代码是：

VALUE of Button

ONE

VALUE of Button

TWO

现在我的问题是我如何管理与我的HTML(Button和各个表的数量)相同的动态。

亲切地指导我如何实现同样的目标。

提前致谢

I have a swatch CSS implemented in my template.

ONE

TWO

So when user click on Button "ONE" it get Selected and "TWO" De-Selected and vice versa

Everything is fine at this point.

But now I want to show / Hide table on base of the button selected Let say if One is selected that I want to show table with Id = "TblSpec_ONE" and hide all other tables and vice versa

. HTML code for the same is:

VALUE of Button

ONE

VALUE of Button

TWO

Now my problem is that how I can manage the same as my HTML (number of Button & respective table ) is dynamic.

So kindly guide me How I can achieve the same.

Thanks in advance

原文：https://stackoverflow.com/questions/35528898

更新时间：2019-11-30 21:03

最满意答案

您可以扩展已经为样本生成的代码，并添加一些逻辑来控制应该显示哪个table 。 它应该很简单，因为它们都具有相同的class和不同的id ，可用于将其链接到活动按钮。 步骤将是：

隐藏具有MGC-TblDtl类的所有表。$("table.MGC-TblDtl").hide();

获取样本活动状态的data-value ，并仅显示具有ID "TblSpec_" + data-value 。 请注意，此代码将根据您实现处理样本的函数的方式而有所不同，但它可能是这样的：$("TblSpec_" + $(this).data("value")).show();

You can extend the code that you already have for the swatch, and add some logic to control what table should be displayed. It should be easy as both have the same class and a different id that can be used to link it to the active button. The steps would be:

Hide all the tables that have the class MGC-TblDtl. $("table.MGC-TblDtl").hide();

Get the data-value for the active state of the swatch and show only the table that has the id "TblSpec_" + data-value. Note that this code will differ depending on how you have implemented the function to process the swatch, but it could be something like this: $("TblSpec_" + $(this).data("value")).show();

相关问答

根据这篇博客 ： 不同的文本颜色大致匹配同名的材料设计标准样式。 标题文本颜色将更加透明，因为文本较大，因此需要较少的颜色对比度。 由于文本较小，正文文本颜色将更加不透明，因此需要与颜色形成更多对比。 所以我认为你应该使用swatch.getBodyTextColor()代替。 另请注意，此标题/正文文本颜色与样本的颜色 ( swatch.getRgb() )具有足够的对比度，应将其用作文本的背景颜色。 According to this blog: The different text colo

...

您可以扩展已经为样本生成的代码，并添加一些逻辑来控制应该显示哪个table 。 它应该很简单，因为它们都具有相同的class和不同的id ，可用于将其链接到活动按钮。 步骤将是： 隐藏具有MGC-TblDtl类的所有表。 $("table.MGC-TblDtl").hide();

获取样本活动状态的data-value ，并仅显示具有ID "TblSpec_" + data-value 。 请注意，此代码将根据您实现处理样本的函数的方式而有所不同，但它可能是这样的： $("TblSpec_" +

...

我不确定我是否明白这个问题，但我根据我的想法提出了一个答案。 基本上，当颜色选择器改变值(颜色)时，我们获取生成的span的新选择的背景颜色并将其设置为表格单元格td的属性。 您可以轻松修改它以根据您的需要进行调整，或者在您的问题中添加更多详细信息，以澄清我误解的内容。 更新 根据评论，我还在颜色样本旁边显示颜色代码(现在包含在div - 根据自己的喜好调整大小) $(function() {

// Hide all stuffs

$('.rw_widget_colour').addC

...

在这里你已经使用了一个id为多个容器。 任何时候，DOM中的id都应该是唯一的。 另外，HTML中带有style标签的语法错误。 您可以使用event属性并相应地操作它，以在页面加载时默认隐藏。 您可以将class mainnav分配给您的显示/隐藏容器，以使它们成为h 检查小提琴 。 请参阅代码： function myFunction(event) {

var x = event.target.nextElementSibling,

y = event.target.first

...

你想要这样吗？ 这是因为你只点击.swatch div然后运行脚本来添加类。 $(".swatch").click(function() {

$("body").addClass("black");

}); .swatch {

height: 100px;

width: 100px;

border-radius: 50%;

float: left;

margin-right: 20px;

border: 1px solid #000;

}

.blac

...

您可以使用嵌入代码Web部件添加js。 只需转到“插入标签”，然后点击“嵌入代码”即可。 然后编辑它，你就可以使用js，css，html。 因此，您可以使用有用的链接。 嵌入代码webpart You can add js by using Embed Code web part. Just go "Insert tab" and click "Embed Code". Then edit this and you will able to use js, css, html. So, you c

...

这是一个非常普遍的要求。 这是一种方法 使用易于管理id的div破坏你的表单，只有第一个可见 。

..

..

...

使用将清空#RoomAddResponse的函数设置超时 success: function (data, textStatus, jqXHR) {

$("#RoomAddResponse").html(data);

setTimeout(function(){

$("#RoomAddResponse").empty();

}, 5000);

$("#RoomAdd")[0].reset();

}

Set a timeout with a func

...

这是在Javascript中完成的。 对于简单的Javascript，即不使用jQuery你可以这样做： document.getElementById("idOfElement").style.display = "none"; // to hide

document.getElementById("idOfElement").style.display = "block"; // to show

这是一个包含此display CSS元素的可能值的链接 。 This is done i

...

有两种方法可以解决这个问题 - 第一种是由Erik Kralj提出的一种方法 - 使用Javascript。 第二个是使用Python来做到这一点。 您可以在视图中编写一个方法，该方法将为用户隐藏此敏感数据，该数据未登录等。 然后在Python中使用： no = list(no)

no[3:-2] = "*" * len(no[3:-2])

The are two ways to deal with that- first one is one, which was presented by E

...