Question

我正在尝试创建3个div，这些div在页面加载时是隐藏的，因此当我单击它们各自的按钮时，它们会显示出来，但是，无论我做什么，我都无法通过单击按钮来使它们显示出来

这是代码的相关部分：

我的div和按钮：

library(raster)

long <- rep(rep(seq(12,36,0.5),41))
lat <-rep(seq(32,52,0.5), each=49)
dat <- rnorm(2009, 26.5, 44.0)

data <- data.frame(long, lat, dat)

rast <- rasterFromXYZ(data)
crs(rast) <- "+proj=laea +lat_0=52 +lon_0=10 +x_0=4321000 +y_0=3210000 +ellps=GRS80 +units=m +no_defs "

slope <- terrain(rast,opt = 'slope', unit = 'degrees')
aspect <- terrain(rast, opt = 'aspect', unit = 'degrees')
flowdir <- terrain(rast, opt = 'flowdir')

spplot(stack(rast, slope, aspect, flowdir), scales = list(draw = T)) # the legend is not correct - only for demonstration purposes

JS用来显示它：

<button onclick="TestsFunction()">Tests</button>

<div id="TestsDiv" style="display:none">
    tests here!
</div>

加载页面后，我可以成功隐藏div，但是单击按钮后，它不会再次显示。

我尝试过

function TestsFunction() {
    var T = document.getElementById("TestsDiv");
    T.style.display = "none";}

代替div上的style =“ display：none”来查看我隐藏它的方式是否是问题，但div仍然不会显示。

我是一个初学者，但是我对JS，HTML或PHP不满意，如果可以的话，有人可以帮忙并解释我的错误吗？我的代码中还需要其他内容吗？我尝试读取类似的线程，但是对于我的理解来说，解决方案都太复杂了，最终导致无法解决我的问题。谢谢！

Answer 1

您需要使功能适应切换 div的显示。当前它只是隐藏它-但如果它已经隐藏，请删除display = "none"以再次显示它。您可以通过将display样式设置为空字符串（使其成为默认字符串）来删除它。

function TestsFunction() {
    var T = document.getElementById("TestsDiv"),
        displayValue = "";
    if (T.style.display == "")
        displayValue = "none";

    T.style.display = displayValue;
}

<button onclick="TestsFunction()">Tests</button>

<div id="TestsDiv" style="display:none">
    tests here!
</div>

如果只希望显示它，而又不想打开和关闭显示，只需立即将其设置为空字符串即可。

function TestsFunction() {
    document.getElementById("TestsDiv").style.display = "";
}

<button onclick="TestsFunction()">Tests</button>

<div id="TestsDiv" style="display:none">
    tests here!
</div>

Answer 2

尝试

function TestsFunction() { TestsDiv.style.display = 'block' }

function TestsFunction() { TestsDiv.style.display = 'block' }

<button onclick="TestsFunction()">Tests</button>

<div id="TestsDiv" style="display:none">
    tests here!
</div>

Answer 3

点击按钮时，您需要将显示设置为block（或其他设置），而不是hide！

function TestsFunction() {
    var T = document.getElementById("TestsDiv");
    T.style.display = "block";  // <-- Set it to block
}

<button onclick="TestsFunction()">Tests</button>

<div id="TestsDiv" style="display:none">
    tests here!
</div>

Answer 4

您应该研究jQuery的hide（）和show（）方法。他们会为您设置样式。

https://www.w3schools.com/jquery/jquery_hide_show.asp

Answer 5

这样做=>

function TestsFunction(){
$("#TestsDiv").css("display","block")
}

在此之前，您应该包括jquery cdn。谢谢。

在单击按钮之前，如何隐藏div？

5 个答案: