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

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;
}

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ử »

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

    
    
        Navigation class Toggling

        
        * {
            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;
        }
        
    
    
    
        
            

                
home
                
about
                
service
                
profile
                
portfolio
                
contact
            
        
    
    
        function myFunction[e] {
            e.target.className = "active";
        }
    
    
    

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

home

Đã 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 NO___TRANS___PRE___29 cho NO___Trans___Pre___30, no___trans___pre___31 hoặc no___trans___pre___32.

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

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

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

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

Đầ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

12.9k5 Huy hiệu vàng41 Huy hiệu bạc59 Huy hiệu đồng5 gold badges41 silver badges59 bronze badges

HTML

 
  

    
Home
    
Item 1
    
Item 2
    
Item 3
    
Item 4
    
Item 5
  
 

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";
}

Để 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 thế nào để bạn tạo một lớp hoạt động trong javascript?

Thêm lớp hoạt động title javaScript và jQuery.

Tạo một div với ID cụ thể [ở đây id = văn bản trực tuyến].

Trên nhấp vào Div Gọi một phương thức makeactive [].

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

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

Xác định hàm makeactive [] trong thẻ bên ..

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

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

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

Bên trong makeactive [] getEuityByid ..Aug 17, 2016 at 7:18

Nhận danh sách lớp yếu tố và thêm lớp hoạt động ..GibboK

Sử dụng InsideHTML để thay đổi thành phần tử ..137 gold badges414 silver badges644 bronze badges

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

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

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

17 cách để làm cho con bạn hoạt động trong lớp học.Aug 17, 2016 at 7:19

Dinesh Shahdinesh ShahDinesh Shah

1.1331 Huy hiệu vàng7 Huy hiệu bạc13 Huy hiệu đồng1 gold badge7 silver badges13 bronze badges

1

Cá nhân tôi sẽ gắn bó với phương thức NO___TRANS___PRE___26. QuerySelector chấp nhận CSS như truy vấn, mà chúng tôi sẽ sử dụng để tìm một lớp hoạt động trên trang. Nếu nó tồn tại [câu lệnh NO___TRANS___PRE___38], hãy xóa nó và áp dụng lớp mới trên mục tiêu.

Xin lưu ý rằng sử dụng NO___Trans___Pre___39 sẽ dẫn đến tất cả các lớp bị xóa. Sẽ rất 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";
}

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

Đã 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.7122 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";
}

Đã 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";
}

Để 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";
}

Đã 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";
}

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

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

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

Làm thế nào để bạn tạo một lớp hoạt động trong javascript?

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 thêm một lớp hoạt động vào một URL?

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