Hướng dẫn how do you make a class active in javascript? - làm thế nào để bạn làm cho một lớp hoạt động trong javascript?

Question

Tìm hiểu cách thêm một lớp hoạt động vào phần tử hiện tại với JavaScript.

Nội dung chính Show

Yếu tố hoạt động
Làm cách nào để làm cho lớp học của tôi hoạt động?
Làm thế nào để bạn đặt một phần tử là hoạt động?
Hoạt động có ý nghĩa gì trong JavaScript?
Làm thế nào lớp kiểm tra hoạt động hay không trong JavaScript?
Làm thế nào để bạn thêm một lớp hoạt động vào một URL?
Làm cách nào để làm cho CSS hoạt động?

Đánh dấu nút Active/Dòng điện (nhấn):

Hãy tự mình thử »

Yếu tố hoạt động

Bước 1) Thêm HTML:

Thí dụ

& nbsp; 1 & nbsp; 2 & nbsp; 3 & nbsp; 4 & nbsp; 5

Bước 2) Thêm CSS:

Thí dụ

& nbsp; 1 & nbsp; 2 & nbsp; 3 & nbsp; 4 & nbsp; 5
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
}

Bước 2) Thêm CSS:
.active, .btn:hover {
background-color: #666;
color: white;
}

/ * Kiểu các nút */. Btn {& nbsp; Biên giới: Không có; & nbsp; Phác thảo: Không có; & nbsp; Đệm: 10px 16px; & nbsp; màu nền: #f1f1f1; & nbsp; con trỏ: con trỏ;}

Thí dụ

& nbsp; 1 & nbsp; 2 & nbsp; 3 & nbsp; 4 & nbsp; 5
var btnContainer = document.getElementById("myDIV");

Bước 2) Thêm CSS:
var btns = btnContainer.getElementsByClassName("btn");

/ * Kiểu các nút */. Btn {& nbsp; Biên giới: Không có; & nbsp; Phác thảo: Không có; & nbsp; Đệm: 10px 16px; & nbsp; màu nền: #f1f1f1; & nbsp; con trỏ: con trỏ;}
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
});
}

Hãy tự mình thử »

Yếu tố hoạt động

Thí dụ

& nbsp; 1 & nbsp; 2 & nbsp; 3 & nbsp; 4 & nbsp; 5
var btnContainer = document.getElementById("myDIV");

Bước 2) Thêm CSS:
var btns = btnContainer.getElementsByClassName("btn");

/ * Kiểu các nút */. Btn {& nbsp; Biên giới: Không có; & nbsp; Phác thảo: Không có; & nbsp; Đệm: 10px 16px; & nbsp; màu nền: #f1f1f1; & nbsp; con trỏ: con trỏ;}
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");

/ * Kiểu lớp Active (và các nút trên chuột-over) */. Active, .btn: Hover {& nbsp; màu nền: #666; & nbsp; màu trắng;}
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }

Bước 3) Thêm JavaScript:
this.className += " active";
});
}

Hãy tự mình thử »

18

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi đang cố gắng tạo một menu điều hướng Tôi đã thực hiện tất cả các HTML và CSS khi đến JavaScript Tôi bị tấn công ở giữa tôi có thể thêm một lớp vào phần tử, nhưng tôi không thể loại bỏ các phần tử còn lại. Xin hãy giúp tôi với. Đây là mã của tôi
here is my code

<!DOCTYPE html>
    <html>
    <head>
        <title>Navigation class Toggling</title>

        <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        header {
            width: 100%;
            height: auto;
            max-width: 600px;
            margin: 0 auto;
        }
        nav {
            width: 100%;
            height: 40px;
            background-color: cornflowerblue;
        }
        ul {
            list-style-type: none;
        }
        li {
            display: inline-block;
        }
        a {
            text-decoration: none;
            padding: 8px 15px;
            display: block;
            text-transform: capitalize;
            background-color: darkgray;
            color: #fff;
        }
        a.active {
            background-color: cornflowerblue;
        }
        </style>
    </head>
    <body>
    <header>
        <nav>
            <ul onclick="myFunction(event)">
                <li><a href="#">home</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">service</a></li>
                <li><a href="#">profile</a></li>
                <li><a href="#">portfolio</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </nav>
    </header>
    <script type="text/javascript">
        function myFunction(e) {
            e.target.className = "active";
        }
    </script>
    </body>
    </html>

Và đây là Codepen của tôiCodepen

Hỏi ngày 17 tháng 8 năm 2016 lúc 7:06Aug 17, 2016 at 7:06

3

Sử dụng

 function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

3 để tìm phần tử hiện có lớp

 function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

4, sau đó bạn có thể xóa lớp đó.

function myFunction(e) {
  var elems = document.querySelectorAll(".active");
  [].forEach.call(elems, function(el) {
    el.classList.remove("active");
  });
  e.target.className = "active";
}

JSfiddle

Thay vì

 function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

3, bạn cũng có thể sử dụng

 function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

6

 function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

JSfiddle 2

Chỉnh sửa

Thay vì lặp qua toàn bộ bộ sưu tập, bạn có thể chọn phần tử có lớp

 function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

4 bằng document.querySelector. Cũng cung cấp

 function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

8 cho UL để bạn có thể nhắm mục tiêu phần tử cụ thể

function myFunction(e) {
  if (document.querySelector('#navList a.active') !== null) {
    document.querySelector('#navList a.active').classList.remove('active');
  }
  e.target.className = "active";
}

<style type="text/css">* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  width: 100%;
  height: auto;
  max-width: 600px;
  margin: 0 auto;
}

nav {
  width: 100%;
  height: 40px;
  background-color: cornflowerblue;
}

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

a {
  text-decoration: none;
  padding: 8px 15px;
  display: block;
  text-transform: capitalize;
  background-color: darkgray;
  color: #fff;
}

a.active {
  background-color: cornflowerblue;
}

<title>Navigation class Toggling</title>

<header>
  <nav>
    <ul onclick="myFunction(event)" id='navList'>
      <li><a href="#">home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">service</a></li>
      <li><a href="#">profile</a></li>
      <li><a href="#">portfolio</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
</header>

Đã trả lời ngày 17 tháng 8 năm 2016 lúc 7:13Aug 17, 2016 at 7:13

Brkbrkbrk

47.6K7 Huy hiệu vàng51 Huy hiệu bạc73 Huy hiệu đồng7 gold badges51 silver badges73 bronze badges

1

Bạn có thể sử dụng các phương thức

 function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

9 cho

function myFunction(e) {
  if (document.querySelector('#navList a.active') !== null) {
    document.querySelector('#navList a.active').classList.remove('active');
  }
  e.target.className = "active";
}

0,

function myFunction(e) {
  if (document.querySelector('#navList a.active') !== null) {
    document.querySelector('#navList a.active').classList.remove('active');
  }
  e.target.className = "active";
}

1 hoặc

function myFunction(e) {
  if (document.querySelector('#navList a.active') !== null) {
    document.querySelector('#navList a.active').classList.remove('active');
  }
  e.target.className = "active";
}

2.
function myFunction(e) { var elems = document.querySelector(".active"); if(elems !==null){ elems.classList.remove("active"); } e.target.className = "active"; }
9 methods to

function myFunction(e) {
  if (document.querySelector('#navList a.active') !== null) {
    document.querySelector('#navList a.active').classList.remove('active');
  }
  e.target.className = "active";
}

0,

function myFunction(e) {
  if (document.querySelector('#navList a.active') !== null) {
    document.querySelector('#navList a.active').classList.remove('active');
  }
  e.target.className = "active";
}

1, or

function myFunction(e) {
  if (document.querySelector('#navList a.active') !== null) {
    document.querySelector('#navList a.active').classList.remove('active');
  }
  e.target.className = "active";
}

2.

Đầu tiên xóa tên lớp khỏi cái trước:

// assuming there's only one with such class name
// otherwise you need querySelectorAll and a loop
document.querySelector('.active').classList.remove('active')

Sau đó thêm nó vào phần tử mới:

e.target.classList.add('active')

Đã trả lời ngày 17 tháng 8 năm 2016 lúc 7:09Aug 17, 2016 at 7:09

LeoleoLeo

Huy hiệu vàng 13K541 Huy hiệu bạc59 Huy hiệu đồng5 gold badges41 silver badges59 bronze badges

HTML

<div class="container">
 <nav>
  <ul class="nav">
    <li class="nav__item"><a class="nav__link active" href="#">Home</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 1</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 2</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 3</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 4</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 5</a></li>
  </ul>
 </nav>
</div>

CSS

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    *::before, *::after {
        box-sizing: border-box;
    }

    .container {
      width: 100%;
      max-width: 1024px;
      display: block;
      margin: 30px auto;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .nav {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
    }

    .nav__item {
      padding: 1rem;
    }

    .nav__link {
      display: block;
      padding: .3125rem 1.5rem;
      text-transform: uppercase;
    }

    .nav__link.active  {
      border: 1px solid #ff4b4c;
      color: #ff4b4c;
    }

JS

function myFunction(e) {
  var elems = document.querySelectorAll(".active");
  [].forEach.call(elems, function(el) {
    el.classList.remove("active");
  });
  e.target.className = "active";
}

0

Để hỗ trợ trình duyệt tốt hơn:

Đã trả lời ngày 17 tháng 8 năm 2016 lúc 7:43May 30, 2018 at 13:57

1

Đã trả lời ngày 17 tháng 8 năm 2016 lúc 8:31

Làm cách nào để làm cho lớp học của tôi hoạt động?

Vì vậy, sẽ là một ý tưởng tốt để mang các công cụ trực quan đến các lớp học để làm cho các phiên hoạt động hơn. Nó có thể là một bài thuyết trình về điểm sức mạnh, hướng dẫn video hoặc một bài thuyết trình nói chuyện của các chuyên gia chủ đề làm sâu sắc thêm mức độ hiểu biết của họ.

Làm thế nào để bạn đặt một phần tử là hoạt động?

Để thay đổi phần tử hoạt động, hãy gọi phương thức Focus () trên phần tử bạn muốn tập trung. Nếu phần tử không thể được tập trung theo mặc định, hãy đặt thuộc tính Tabindex của nó thành -1 trước khi gọi phương thức lấy nét.

https://developer.mozilla.org/en/docs/Web/API/Element/classList

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Hoạt động có ý nghĩa gì trong JavaScript?

function myFunction(e) {
  var elems = document.querySelectorAll(".active");
  [].forEach.call(elems, function(el) {
    el.classList.remove("active");
  });
  e.target.className = "active";
}

1

function myFunction(e) {
  var elems = document.querySelectorAll(".active");
  [].forEach.call(elems, function(el) {
    el.classList.remove("active");
  });
  e.target.className = "active";
}

2

function myFunction(e) {
  var elems = document.querySelectorAll(".active");
  [].forEach.call(elems, function(el) {
    el.classList.remove("active");
  });
  e.target.className = "active";
}

3

: Bộ chọn hoạt động được sử dụng để chọn và tạo kiểu liên kết hoạt động. Một liên kết sẽ hoạt động khi bạn nhấp vào nó. Mẹo: Bộ chọn hoạt động có thể được sử dụng trên tất cả các yếu tố, không chỉ các liên kết.Aug 17, 2016 at 7:18

Làm thế nào lớp kiểm tra hoạt động hay không trong JavaScript?GibboK

Đây là cách làm điều này trong hai bước đơn giản ..137 gold badges414 silver badges644 bronze badges

Lấy phần tử từ Nút DOM: Const = Document. Truy vấnSelector ("Nút") ;.

function myFunction(e) {
  var elems = document.querySelectorAll(".active");
  [].forEach.call(elems, function(el) {
    el.classList.remove("active");
  });
  e.target.className = "active";
}

4

function myFunction(e) {
  var elems = document.querySelectorAll(".active");
  [].forEach.call(elems, function(el) {
    el.classList.remove("active");
  });
  e.target.className = "active";
}

5

Sử dụng phương thức Element.ClassList.Contains để kiểm tra một lớp: // Trả về 'True' nếu lớp tồn tại và 'Sai' nếu nó không. const isActive = nút. Danh sách lớp. chứa ("hoạt động") ;.Aug 17, 2016 at 7:19

Làm thế nào để bạn thêm một lớp hoạt động vào một URL?Dinesh Shah

jQuery (hàm ($) {.1 gold badge7 silver badges13 bronze badges

1

đường dẫn var = cửa sổ. địa điểm. href ;.

Xin lưu ý rằng sử dụng

function myFunction(e) {
  if (document.querySelector('#navList a.active') !== null) {
    document.querySelector('#navList a.active').classList.remove('active');
  }
  e.target.className = "active";
}

9 sẽ dẫn đến tất cả các lớp bị xóa. Sẽ là gọn gàng hơn khi sử dụng

 function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

9 cho mọi thứ.

function myFunction(e) {
  var elems = document.querySelectorAll(".active");
  [].forEach.call(elems, function(el) {
    el.classList.remove("active");
  });
  e.target.className = "active";
}

6

Đã trả lời ngày 17 tháng 8 năm 2016 lúc 7:21Aug 17, 2016 at 7:21

roberrrt-sroberrrt-sroberrrt-s

7.7222 Huy hiệu vàng45 Huy hiệu bạc55 Huy hiệu Đồng2 gold badges45 silver badges55 bronze badges

Dưới đây sẽ giúp.

function myFunction(e) {
  var elems = document.querySelectorAll(".active");
  [].forEach.call(elems, function(el) {
    el.classList.remove("active");
  });
  e.target.className = "active";
}

7

Đã trả lời ngày 17 tháng 8 năm 2016 lúc 7:12Aug 17, 2016 at 7:12

Không gian sắtIronAces

1.7551 huy hiệu vàng25 Huy hiệu bạc34 Huy hiệu đồng1 gold badge25 silver badges34 bronze badges

1

JS

function myFunction(e) {
  var elems = document.querySelectorAll(".active");
  [].forEach.call(elems, function(el) {
    el.classList.remove("active");
  });
  e.target.className = "active";
}

8

Để hỗ trợ trình duyệt tốt hơn:

function myFunction(e) {
  var elems = document.querySelectorAll(".active");
  [].forEach.call(elems, function(el) {
    el.classList.remove("active");
  });
  e.target.className = "active";
}

9

Đã trả lời ngày 17 tháng 8 năm 2016 lúc 7:43Aug 17, 2016 at 7:43

 function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

0

 function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

1

function myFunction(e) {
  var elems = document.querySelectorAll(".active");
  [].forEach.call(elems, function(el) {
    el.classList.remove("active");
  });
  e.target.className = "active";
}

3

Đã trả lời ngày 17 tháng 8 năm 2016 lúc 8:31Aug 17, 2016 at 8:31

Làm cách nào để làm cho lớp học của tôi hoạt động?

Vì vậy, sẽ là một ý tưởng tốt để mang các công cụ trực quan đến các lớp học để làm cho các phiên hoạt động hơn. Nó có thể là một bài thuyết trình về điểm sức mạnh, hướng dẫn video hoặc một bài thuyết trình nói chuyện của các chuyên gia chủ đề làm sâu sắc thêm mức độ hiểu biết của họ.bring visual tools to classrooms to make the sessions more active. It can be a power point presentation, video tutorials or a talking presentation by subject experts that deepens their level of understanding.

Làm thế nào để bạn đặt một phần tử là hoạt động?

Để thay đổi phần tử hoạt động, hãy gọi phương thức Focus () trên phần tử bạn muốn tập trung. Nếu phần tử không thể được tập trung theo mặc định, hãy đặt thuộc tính Tabindex của nó thành -1 trước khi gọi phương thức lấy nét.call the focus() method on the element you want to focus. If the element can't be focused by default, set its tabIndex property to -1 before calling the focus method.

Hoạt động có ý nghĩa gì trong JavaScript?

: Bộ chọn hoạt động được sử dụng để chọn và tạo kiểu liên kết hoạt động. Một liên kết sẽ hoạt động khi bạn nhấp vào nó. Mẹo: Bộ chọn hoạt động có thể được sử dụng trên tất cả các yếu tố, không chỉ các liên kết.used to select and style the active link. A link becomes active when you click on it. Tip: The :active selector can be used on all elements, not only links.

Làm thế nào lớp kiểm tra hoạt động hay không trong JavaScript?

Đây là cách làm điều này trong hai bước đơn giản ...

Lấy phần tử từ Nút DOM: Const = Document.Truy vấnSelector ("Nút") ;.

Sử dụng phương thức Element.ClassList.Contains để kiểm tra một lớp: // Trả về 'True' nếu lớp tồn tại và 'Sai' nếu nó không.const isActive = nút.Danh sách lớp.chứa ("hoạt động") ;.

Làm thế nào để bạn thêm một lớp hoạt động vào một URL?

jQuery (hàm ($) {.

đường dẫn var = cửa sổ.địa điểm.href ;.

// vì thuộc tính 'href' của phần tử DOM là đường dẫn tuyệt đối ..

$ ('ul a').Mỗi (function () {.

if (this. href === đường dẫn) {.

$ (cái này).AddClass ('Active') ;.

Làm cách nào để làm cho CSS hoạt động?

Để tạo các liên kết một cách thích hợp, hãy đặt: Quy tắc hoạt động sau tất cả các quy tắc liên quan đến liên kết khác, như được định nghĩa bởi LVHA-order :: link-: đã truy cập-: di chuột-: hoạt động.:link — :visited — :hover — :active .

programming javascript Class active Add class JavaScript Active navbar Bootstrap Event active CSS Toggle class