Question

function changecontent(description){
     console.log(description);
     document.getElementById('content').innerHTML = description;
}

<body>


<div class="editingfunction">
<ul style="list-style-type:none">

<li>Please Mouse Over Subject</li>
<li onClick="changecontent();">Math</li>
<li onClick="changecontent();">Science</li>
<li onClick="changecontent();">Geography</li>
<li onClick="changecontent();">Arts</li>
<li onClick="changecontent();">Buisness</li>
<li onClick="changecontent();">Health</li>
<li onClick="changecontent();">Social Science</li>

</ul>
</div>

<div id="content">

</div>
</body>

我打算为页面制作多个布局，根据点击的项目，内容应相应更改。问题是我不知道如何使java函数根据点击的项目改变内容...

Answer 1

你可以做这样的事情：

<li onClick="changecontent('Math');">Math</li>

这应该有用..

Answer 2

你必须像这样把方法参数传递给方法

<li onClick="changecontent("Math");">Math</li>

Answer 3

因此，如果我理解正确，您可以为每个要动态插入#content的主题提供多个描述性文本。您可以将文本存储在变量中：

var mathDesc = "Math is awesome and <b>not scary at all!</b>";

然后您可以将其插入#content，如下所示：

<li onClick="changecontent(mathDesc);">Math</li>

就个人而言，我会使用不同的方法：拥有多个content-div并且每次都隐藏一个而不是一个。

隐藏内容的一种方法是以编程方式分配className，例如hidden并将display:none作为CSS规则分配给该类。

以下是一个示例代码段。我根据list-item-id确定了内容，我认为这是你想要做的。

function changeContent(id) {
  var content = document.getElementsByClassName("content");
  for (var i = 0; i < content.length; i++) {
    if (content[i].id === id + "Content") {
      content[i].classList.remove("hidden");
    } else {
      content[i].classList.add("hidden");
    }
  }
}

document.getElementById("chooseSubject").onclick = function(e) {
  changeContent(e.target.id);
}

#chooseSubject {
  list-style-type: none;
}
#chooseSubject li {
  cursor: pointer;
}
#chooseSubject li:hover {
  background-color: rgb(267, 214, 269);
}
#chooseSubject li:active {
  background-color: rgb(167, 114, 169);
}
.hidden {
  display: none;
}

<ul id="chooseSubject">
  <li id="Math">Math</li>
  <li id="Science">Science</li>
  <li id="Geography">Geography</li>
  <li id="Arts">Arts</li>
</ul>
<div id="MathContent" class="content hidden">
  Math is awesome and <b>not scary at all!</b>
</div>
<div id="ScienceContent" class="content hidden">
  Science is like math but less exact and more hands-on.
</div>
<div id="GeographyContent" class="content hidden">
  You know.. Countries, cities, rivers and stuff.
</div>
<div id="ArtsContent" class="content hidden">
  You learn about things that have no function in Arts.
</div>

Answer 4

我是这样做的，对不起，我的问题在这种事情上很模糊......

<script>
    function changecontent(clicked_id){


    	alert(clicked_id);
    }


    </script>

<!doctype html>
<html>
<head>
<style>





}
.editingfunction{
background-color: ;
text-decoration-color: white;
border :none;
opacity: 0.4;
width: 100px;


}
.col:active {
background-color: rgb(167,114,169);
cursor:pointer;
text-decoration-color:red; 
}

.col:visited
{
text-decoration-color:red; 



}








body {

background: ;
font-family:  ;
text-decoration-color: white;

}










</style>





</head>
<body>



	
<div class="editingfunction">
<ul style="list-style-type:none">

<li>Please Click Subject</li>
<li class="col" id="Math" onClick="changecontent(this.id);">Math</li>
<li class="col" id="Science" onClick="changecontent(this.id);">Science</li>
<li class="col" id="Geography" onClick="changecontent(this.id);">Geography</li>
<li class="col" id="Arts" onClick="changecontent(this.id);">Arts</li>
<li class="col" id="Buisness" onClick="changecontent(this.id);">Buisness</li>
<li class="col" id="Health" onClick="changecontent(this.id);">Health</li>
<li class="col" id="Social_Science" onClick="changecontent(this.id);">Social Science</li>

</ul>
</div>

<div id="content">

</div>
</body>
</html>



<!-- begin snippet: js hide:false -->

我如何使用函数使用Onclick函数更改网页的内容

4 个答案: