Question

我正在尝试将活动类更改为选定的项目，但我做对了，我在google上搜索过，在这里也出现了堆栈溢出，我找到了toggle（）方法，所以我尝试了一下在我的代码上，但我认为我没有正确使用它这是我的代码： HTML

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context=".fragment.NewsContentFragment"
             android:padding="5dp"
>

   <WebView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:id="@+id/news_content_webview"
   >
   </WebView>

</FrameLayout>

CSS

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <body>
<nav class="main-nav">
  <div class="logo">
    <p class="text">company logo</p>
  </div>
  <ul class="main-nav-items">
    <li class="main-nav-item active" onclick="active()">home</li>
    <li class="main-nav-item active" onclick="active()">contact</li>
    <li class="main-nav-item active" onclick="active()">about</li>
  </ul>
</nav>

<script src="script.js" charset="utf-8"></script>
</body>
</html>

JS：

.main-nav{
  display: flex;
  align-items: center;
}
.main-nav-items{
  display: flex;
  width: 1200px;
  list-style-type: none;
  justify-content: flex-end;
align-items: center;
 font-size: 18px;
 padding: 10px;
}
.main-nav-item{
  font-size: 18px;
  padding: 10px;
  border-radius: 10px;
}
.main-nav li.active{
  background-color: #542188;
  padding: 10px;
  border-radius: 10px;
  color: white;

}

.main-nav-item:hover{
  background-color: #ddd;
  color: white;
}

先谢谢您

Answer 1

首先将jQuery添加到您的html文档中

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <body>
<nav class="main-nav">
  <div class="logo">
    <p class="text">company logo</p>
  </div>
  <ul class="main-nav-items">
    <li class="main-nav-item" onclick="active(1)" id="1">home</li>
    <li class="main-nav-item" onclick="active(2)" id="2">contact</li>
    <li class="main-nav-item" onclick="active(3)" id="3">about</li>
  </ul>
</nav>

<script src="script.js" charset="utf-8"></script>
<script
 src="https://code.jquery.com/jquery-3.3.1.min.js"
 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
 crossorigin="anonymous"></script>
 <!-- here is jquery plugin -->
 <script>
function active(id){
$("#"+id).on("click",function(){
        $(this).toggleClass("active");
      });
}


 </script>
</body>
</html>

Answer 2

<li class="main-nav-item active" onclick="active(this)">home</li>
<li class="main-nav-item active" onclick="active(this)">contact</li>
<li class="main-nav-item active" onclick="active(this)">about</li>

您需要传递被单击的元素，以获取有关哪个元素将保持活动状态的参考。

function active(target){
    /* this block is to remove all the active class on all main-nav-item
     * [if this scenario is the one you really needed to do
     *    else remove this part]
     */
    var items=document.getElementsByClassName("main-nav-item");
    for(var i=0;i<items.length;i++){
       items[i].classList.remove("active");
    }

    /* use the parameter "target" on which you passed using the html code 
     * "onclick(this)" and toggle the class "active" 
     */
    target.classList.toggle("active");
}

PS。

如果所有主导航项都具有相同的流程，您可以使用“ querySelectorAll”来获取所有main-nav-item，然后从那里添加一个用于单击的事件侦听器，然后在HTML上删除所有的“ onclick”

  <ul class="main-nav-items">
    <li class="main-nav-item active">home</li>
    <li class="main-nav-item active">contact</li>
    <li class="main-nav-item active">about</li>
  </ul>

    var mainNavItems = document.querySelectorAll(".main-nav-item");

    Array.forEach(mainNavItems, function( navItem ) {
       navItem.addEventListener("click", function(){
            /* again, you could remove this block of codes, if you
             * just intend to toggle the active class */
              var items=document.getElementsByClassName("main-nav-item");
              for(var i=0;i<items.length;i++){
                items[i].classList.remove("active");
              }


            this.classList.toggle("active");
       });
    });

将活动班级添加到所选项目

2 个答案: