Question

我有一个问题，我需要一些帮助。这是我的代码：

＆＃13;

function myFunction(id) {
  document.getElementById(id).className = 'show_team';
}

＆＃13;

.show_team {
  font-weight: bold;
  color: green;
}

＆＃13;

<a id="1" href="#" onclick="myFunction(this.id);">Team 1</a>
<a id="2" href="#" onclick="myFunction(this.id);">Team 2</a>
<a id="3" href="#" onclick="myFunction(this.id);">Team 3</a>
<a id="4" href="#" onclick="myFunction(this.id);">Team 4</a>
<a id="5" href="#" onclick="myFunction(this.id);">Team 5</a>
<a id="6" href="#" onclick="myFunction(this.id);">Team 6</a>
<a id="7" href="#" onclick="myFunction(this.id);">Team 7</a>
<a id="8" href="#" onclick="myFunction(this.id);">Team 8</a>
<a id="9" href="#" onclick="myFunction(this.id);">Team 9</a>
<a id="10" href="#" onclick="myFunction(this.id);">Team 10</a>

＆＃13;

我想以粗体显示最后点击的项目的链接文本。但我不能，因为当我点击一个时，其他链接也会保持粗体。

Answer 1

您需要重置之前显示为粗体

的元素的css类

使用class＆＃39; show_team＆＃39;

获取所有html元素的代码示例

document.getElementsByClassName('show_team')

它将返回一个元素数组，因此您可以使用以下示例重置类

document.getElementsByClassName('show_team')[0].className = ''

这是假设＆＃39; show_team＆＃39;将一次用于一个元素，并给你一个想法。

Answer 2

单击时，应从所有元素中删除类.show_team，然后将其添加到单击的元素中。

我已经更新了代码，您不再需要在每个元素上添加onclick函数。

(function() {
  var aList = document.getElementsByClassName("link"); // list of elements
  for(var i = 0; i < aList.length; i++) {
    aList[i].addEventListener("click", function(element) {
      for(var i = 0; i < aList.length; i++) {   // loop through elements
        aList[i].classList.remove("show_team"); // and remove the class "show_team"
      }
      // add class "show_team" to the clicked element
      element.target.classList.add("show_team");
    });
  }
})();

.show_team {
  font-weight: bold;
  color: green;
}

<a id="1" class="link" href="#">Team 1</a>
<a id="2" class="link" href="#">Team 2</a>
<a id="3" class="link" href="#">Team 3</a>
<a id="4" class="link" href="#">Team 4</a>
<a id="5" class="link" href="#">Team 5</a>
<a id="6" class="link" href="#">Team 6</a>
<a id="7" class="link" href="#">Team 7</a>
<a id="8" class="link" href="#">Team 8</a>
<a id="9" class="link" href="#">Team 9</a>
<a id="10" class="link" href="#">Team 10</a>

Answer 3

在设置class之前，您需要在onClick函数中添加以下代码：

for (i = 1; i < 11; i++) {
            document.getElementById(i.toString()).className = '';
            //alert("test");
        }

这是完整的锻炼：

    	function myFunction(id){
    		for (i = 1; i < 11; i++) {
    			document.getElementById(i.toString()).className = '';
    			//alert("test");
    		}
    		document.getElementById(id).className = 'show_team';
    	}

	.show_team{
	font-weight: bold;
	color: green;
	}

<body>
	<a id="1" href="#" onclick="myFunction(this.id);">Team 1</a>
	<a id="2" href="#" onclick="myFunction(this.id);">Team 2</a>
	<a id="3" href="#" onclick="myFunction(this.id);">Team 3</a>
	<a id="4" href="#" onclick="myFunction(this.id);">Team 4</a>
	<a id="5" href="#" onclick="myFunction(this.id);">Team 5</a>
	<a id="6" href="#" onclick="myFunction(this.id);">Team 6</a>
	<a id="7" href="#" onclick="myFunction(this.id);">Team 7</a>
	<a id="8" href="#" onclick="myFunction(this.id);">Team 8</a>
	<a id="9" href="#" onclick="myFunction(this.id);">Team 9</a>
	<a id="10" href="#" onclick="myFunction(this.id);">Team 10</a>
</body>

如何获得＆＃39;粗体属性＆＃39;仅在点击的项

3 个答案: