使用Javascript进行内容切换
我的主页上有3个特别感兴趣的部分。 我想做的是设置调用javascript函数的链接，确保隐藏2个部分，并且只显示其按钮被单击的部分 这是我的密码：使用Javascript进行内容切换,javascript,Javascript,我的主页上有3个特别感兴趣的部分。 我想做的是设置调用javascript函数的链接，确保隐藏2个部分，并且只显示其按钮被单击的部分 这是我的密码： <div id="idc" class="leftFloat"><span id="title" class="title1">Introduction</span></div> <div class="rightFloat">
<div id="idc" class="leftFloat"><span id="title" class="title1">Introduction</span></div>
<div class="rightFloat">
<div id="agri"><a onclick="ContentSwitch('Agri');">Agri Industries</a></div>
<div id="ict"><a onclick="ContentSwitch('ict');">ICT Investments</a></div>
<div id="intro"><a onclick="ContentSwitch('intro');">Introduction</a></div>
</div>
<div id="agriContent" style="display: none;">
<div class="vrtlay_both">AGRI INDUSTRIES</div>
</div>
<div id="ictContent" style="display: none;">
<div class="vrtlay_both">ICT INVESTMENTS</div>
</div>
<div id="introContent">
<div class="vrtlay_both">ICT INVESTMENTS</div>
</div>
<script type="text/javascript">
function ContentSwitch(id) {
if (id = "Agri") {
if (document.getElementById("agriContent").style.display = "none") {
document.getElementById("agriContent").style.display = "block";
// Hide other content
document.getElementById("ictContent").style.display = "none";
document.getElementById("introContent").style.display = "none";
// Change the look of the title
document.getElementById("idc").style.backgroundColor = "rgb(0, 100, 0)";
document.getElementById("idc").style.color = "rgb(255, 255, 255)";
document.getElementById("title").innerHTML = "Agri Industries";
} else {
return;
}
}
if (id = "ict") {
if (document.getElementById("ictContent").style.display = "none") {
document.getElementById("ictContent").style.display = "block";
// Hide other content
document.getElementById("agriContent").style.display = "none";
document.getElementById("introContent").style.display = "none";
// Change the look of the title
document.getElementById("idc").style.backgroundColor = "rgb(36, 46, 111)";
document.getElementById("idc").style.color = "rgb(255, 255, 255)";
document.getElementById("title").innerHTML = "ICT Investments";
} else {
return;
}
}
if (id = "intro") {
if (document.getElementById("introContent").style.display = "none") {
document.getElementById("introContent").style.display = "block";
// Hide other content
document.getElementById("agriContent").style.display = "none";
document.getElementById("ictContent").style.display = "none";
// Change the look of the title
document.getElementById("idc").style.backgroundColor = "rgb(255, 255, 255)";
document.getElementById("idc").style.color = "rgb(0, 0, 0)";
document.getElementById("title").innerHTML = "Introduction";
} else {
return;
}
}
}
</script>
导言
农业产业
信息和通信技术投资
介绍
农业产业
信息和通信技术投资
信息和通信技术投资
功能内容开关（id）{
如果（id=“农业”）{
if（document.getElementById（“agriContent”）.style.display=“无”）{
document.getElementById（“agriContent”）.style.display=“block”；
//隐藏其他内容
document.getElementById（“ictContent”）.style.display=“无”；
document.getElementById（“introContent”）.style.display=“无”；
//更改标题的外观
document.getElementById（“idc”）.style.backgroundColor=“rgb（01100，0）”；
document.getElementById（“idc”）.style.color=“rgb（255，255，255）”；
document.getElementById（“title”）.innerHTML=“农业产业”；
}否则{
返回；
}
}
如果（id=“ict”）{
if（document.getElementById（“ictContent”）.style.display=“无”）{
document.getElementById（“ictContent”）.style.display=“block”；
//隐藏其他内容
document.getElementById（“agriContent”）.style.display=“无”；
document.getElementById（“introContent”）.style.display=“无”；
//更改标题的外观
document.getElementById（“idc”）.style.backgroundColor=“rgb（36,46,111）”；
document.getElementById（“idc”）.style.color=“rgb（255，255，255）”；
document.getElementById（“title”）.innerHTML=“ICT投资”；
}否则{
返回；
}
}
如果（id=“intro”）{
if（document.getElementById（“introContent”）.style.display=“无”）{
document.getElementById（“introContent”）.style.display=“block”；
//隐藏其他内容
document.getElementById（“agriContent”）.style.display=“无”；
document.getElementById（“ictContent”）.style.display=“无”；
//更改标题的外观
document.getElementById（“idc”）.style.backgroundColor=“rgb（255，255，255）”；
document.getElementById（“idc”）.style.color=“rgb（0,0,0）”；
document.getElementById（“title”）.innerHTML=“简介”；
}否则{
返回；
}
}
}
我知道这并不是最优雅（或最有效）的方法，所以如果有人能提出更好的方法，我洗耳恭听
现在，我真的很想这样做，但我看不出问题所在。Javascript中的比较使用双等于运算符（
==if=if开关，但至少应该使用elseif
if (document.getElementById("agriContent").style.display = "none") {
同样，这里的操作是错误的，但是您也无法捕获对所关联元素的引用，因此在反复运行getElementById时会失去性能。此外，您正在测试特定的样式属性，以便与实现紧密耦合。这使得您的代码不那么灵活，更容易出错。CSS类是您的朋友：使用它们，更改它们的应用程序，别管样式
} else {
return;
}
否则什么也不做？您这样做是为了弥补前面的逻辑中缺少elseif语句的不足-这个块只是让人困惑。
好的
这是你真正的问题。你在做作业，而不是比较
现在来改进代码
“id”是独占的，是一个常量表达式，因此您可以在此处使用开关，但至少应该使用elseif
if (document.getElementById("agriContent").style.display = "none") {
同样，这里的操作是错误的，但是您也无法捕获对所关联元素的引用，因此在反复运行getElementById时会失去性能。此外，您正在测试特定的样式属性，以便与实现紧密耦合。这使得您的代码不那么灵活，更容易出错。CSS类是您的朋友：使用它们，更改它们的应用程序，别管样式
} else {
return;
}
否则什么也不做？您这样做是为了弥补以前逻辑中elseif语句的不足——这个集团
<div id="agriContent" class="invisible">
<div class="vrtlay_both">AGRI INDUSTRIES</div>
</div>
<div id="ictContent" class="invisible">
<div class="vrtlay_both">ICT INVESTMENTS</div>
</div>
<div id="introContent" class="visible">
<div class="vrtlay_both">ICT INVESTMENTS</div>
</div>
function ContentSwitch(div) {
$(".visible").addClass("invisible").removeClass("visible");
div.removeClass("invisible").addClass("visible");
}
var agriContent, ictContent, introContent, idc, title;
function ContentSwitch(id) {
agriContent = agriContent || document.getElementById("agriContent");
ictContent = ictContent || document.getElementById("ictContent");
introContent = introContent || document.getElementById("introContent");
idc = idc || document.getElementById("idc");
title = title || document.getElementById("title");
switch (id) {
case "Agri":
if (agriContent.style.display !== "none") {
return;
}
agriContent.style.display = "block";
ictContent.style.display = "none";
introContent.style.display = "none";
idc.style.backgroundColor = "rgb(0, 100, 0)";
idc.style.color = "rgb(255, 255, 255)";
title.innerHTML = "Agri Industries";
break;
case "ict":
// ...
break;
case "intro":
// ...
break;
}
}