我对JavaScript的了解非常有限,我希望有人能帮助我!
我有下面的代码,我试图使代码工作与类,而不是id,还添加了淡入/淡出效果在这些函数。我已经添加了一个类和id集,试图使它尽可能清楚我要做什么。
<!DOCTYPE html>
<html>
<head>
<style>
.sub1, .sub2 {
float: right;
background-color: blue;
width: 250px;
height: 250px;
display: none;
}
#sub1, #sub2 {
float: right;
background-color: red;
width: 250px;
height: 250px;
display: none;
}
</style>
<script language="javascript" type="text/javascript">
// class
function SetTabsHidden(tabToHide)
{
document.getElementsByClassName('.sub1').style.display = "none";
document.getElementsByClassName('.sub2').style.display = "none";
}
function SetTabsVisible(tabToShow)
{
document.getElementsByClassName('.sub1').style.display = "none";
document.getElementsByClassName('.sub2').style.display = "none";
document.getElementsByClassName(tabToShow).style.display = "block";
}
// id
function SetTabsHidden(tabToHide)
{
document.getElementById('sub1').style.display = "none";
document.getElementById('sub2').style.display = "none";
$(tabToHide).fadeOut("slow");
}
function SetTabsVisible(tabToShow)
{
elements = document.getElementById('sub1').style.display = "none";
elements = document.getElementById('sub2').style.display = "none";
elements = document.getElementById(tabToShow).style.display = "block";
$(tabToShow).fadeIn("slow");
}
</script>
</head>
<body>
<div id="main">
<input type=button name=type value='class1' onclick="SetTabsVisible('.sub1');";>
<input type=button name=type value='class2' onclick="SetTabsVisible('.sub2');";>
<input type=button name=type value='id1' onclick="SetTabsVisible('sub1');";>
<input type=button name=type value='id2' onclick="SetTabsVisible('sub2');";>
<input type=button name=type value='Hide' onclick="SetTabsHidden();";>
<div class="sub1" id="sub1"></div>
<div class="sub2" id="sub2"></div>
</body>
</html>
您的getElementsByClassName
将无法工作,因为您不想在类名之前包含句号(您会注意到byID不包括#)。同样的道理)只要把它改成sub1或sub2或其他的,它就会开始工作了。
你定义了四个函数,但是它们有相同的名字,这是行不通的
您必须将它们命名为不同的名称,例如"SetTabsVisibleByClass"....或者你可以只使用两个函数,但传递另一个参数,让它知道它是你想要使用的类还是id。
您的示例代码使用jQuery进行衰落。如果您计划使用jQuery,则不需要所有这些额外的逻辑。它可以为你处理:
$(".sub1, .sub2").hide()
或者,如果它们都包含在一起,你可以这样做:
$(tabToShow).siblings().hide()
这样你就不用记住所有不同的类名了
如果你不打算使用jQuery,那么你也可以使用CSS过渡。比如:
.sub1, .sub2, .sub3 {
opacity: 0;
}
.sub1.active, .sub2.active, .sub3.active {
opacity: 1;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
annnd
document.getElementById(tabToShow).setAttribute("class", "active")
当然,这种方法意味着不使用display: none
,这可能对您很重要。在这种情况下,您可能需要为transitionEnd
添加事件侦听器,以便知道何时添加display: none。