Question

嗨，所以我试图让我的navBar工作，以便当我点击它时，将项目从一个项目更改为项目，反之亦然，对于任何其他活动项目，此时我无法看到我在哪里＆＃39我错了。初学者程序员在这里很抱歉，如果它很明显！

提前致谢。

HTML：

<a href="#about_me" class="item active" onClick="switch(this);">
  About me
</a>
<a href="#experience" class="item" onClick="switch(this);">
  Experiences
</a>
<a href="#education" class="item" onClick="switch(this);">
  Education
</a>

使用Javascript：

function switch(x) {
  var className = x.getAttribute("class");
  if(className == "item") {
    document.getElementsByClassName("item active").className("item");
    x.className = "item active";
  }
  else {
    x.className = "item";
  }
  return true
}

Answer 1

如果打开控制台（F12），您的代码会出现一些语法错误。

switch是保留关键字
列表项getElementsByClassName返回NodeList
className("item");不是函数

如果您需要切换当前元素active类，可以使用classList.toggle方法。

如果您需要＆＃34;停用＆＃34;您还可以使用document.querySelectorAll('.item.active')与forEach循环结合使用。

function deactivate() {
   [].forEach.call(document.querySelectorAll('.item.active'), function(el) {
     el.classList.remove('active')
   })
}

＆＃13;

function toggle(el) {
  el.classList.toggle('active')
}

＆＃13;

.active {
  color: red;
}

＆＃13;

<a href="#about_me" class="item active" onClick="toggle(this);">
  About me
</a>
<a href="#experience" class="item" onClick="toggle(this);">
  Experiences
</a>
<a href="#education" class="item" onClick="toggle(this);">
  Education
</a>

＆＃13;

Answer 2

首先，switch是一个保留字，你不能将它用作函数名。然后className不是方法，它是一个属性，可以设置。

function switch1(x) {
  var className = x.getAttribute("class");
  if(className == "item") {
    x.className = "item active";
  }
  else {
    x.className = "item";
  }
  return true
}

<a href="#about_me" class="item active" onClick="switch1(this);">
  About me
</a>
<a href="#experience" class="item" onClick="switch1(this);">
  Experiences
</a>
<a href="#education" class="item" onClick="switch1(this);">
  Education
</a>

Answer 3

switch是保留关键字，您不应该将其用作函数名称，更改为下面的其他内容

<a href="#about_me" class="item active" onClick="switchClass(this);">
    About me
</a>
<a href="#experience" class="item" onClick="switchClass(this);">
    Experiences
</a>
<a href="#education" class="item" onClick="switchClass(this);">
    Education
</a>
<script>

    function switchClass(x) {
        if(document.getElementsByClassName("item active").length){
            document.getElementsByClassName("item active")[0].className = "item";
        }
        x.className = "item active";
        return true;
    }
</script>

Answer 4

＆＃13;

<!DOCTYPE html>
<html>
<head>
	 <title> Sample Code </title>
	 <style>
        .active{
        	color:red;
        	border:1px solid red;
        }
	 </style>
</head>
<body>
   
<a href="#about_me" class="item active" onClick="highlight(this)">
  About me
</a>
<a href="#experience" class="item" onClick="highlight(this)">
  Experiences
</a>
<a href="#education" class="item" onClick="highlight(this)">
  Education
</a>



   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
       function highlight(el){
           $('.item').removeClass('active');
           $(el).addClass('active');
       }
   </script>
</body>
</html>

＆＃13;

Answer 5

是的，jquery会让事情变得简单，试试这段代码

import sys
from PyQt5.QtWidgets import *

class Window(QWidget):
    def __init__(self, *args, **kwargs):
        QWidget.__init__(self, *args, **kwargs)
        self.resize(300, 170)

        self.textBrowser = QTextBrowser(self)
        self.textBrowser.document().setHtml("""
<div>
    <img src="icons/info1.png" style="vertical-align: middle;"/>
    <span style="vertical-align: middle;">Here is some text.</span>
</div>""")

        self.layout = QGridLayout()
        self.layout.addWidget(self.textBrowser)
        self.setLayout(self.layout)

app = QApplication(sys.argv)
win = Window()
win.show()
sys.exit(app.exec_())

试图在html中使用onClick属性来切换类但不起作用

5 个答案: