Html 如何在开始时将进度条设置为不可见,然后在单击时显示?
我有一些h和img元素,它们是li的子元素。当用户单击li时,我想隐藏这些内容并显示进度条。我有出现/消失的项目工作,但不知道如何设置进度条,以最初不显示 代码如下:Html 如何在开始时将进度条设置为不可见,然后在单击时显示?,html,Html,我有一些h和img元素,它们是li的子元素。当用户单击li时,我想隐藏这些内容并显示进度条。我有出现/消失的项目工作,但不知道如何设置进度条,以最初不显示 代码如下: <li id="li1""> <img id = "track_image" src="image.jpg" /> <h1 id = "track_title">Title</h1> <h2 id = "artist_name">Name"
<li id="li1"">
<img id = "track_image" src="image.jpg" />
<h1 id = "track_title">Title</h1>
<h2 id = "artist_name">Name"</h2>
<audio id="audio1"></audio>
div id="progressBar"><span id="progress"></span></div>
</li>
function audioClick(evt, listElementId, audioId, clip) {
var listElement = document.getElementById(listElementId);
var title = listElement.getElementsByTagName("h1")[0];
hideOrShowElement(title);
var artist = listElement.getElementsByTagName("h2")[0];
hideOrShowElement(artist);
var date = listElement.getElementsByTagName("h3")[0];
hideOrShowElement(date);
var audio = document.getElementById(audioId);
if (audio.paused) {
audio.src = clip;
audio.play();
}
else {
audio.pause();
audio.currentTime = 0;
}
}
function hideOrShowElement(element) {
if(element.style.display == 'none')
element.style.display = 'block';
else
element.style.display = 'none';
}
如果您正在使用adobe链接的css,则只需将#progress的显示更改为none:
#progress {
background-color:#ff0000; // red
height:20px;
display:none;
}
在页面加载时执行此操作
var ProgressBar = document.getElementById("progressbar");
elem.style.display = "none";
点击
ProgressBar.style.display = "block";