在頁面加載問題上使用javascript刪除並添加類

Question

當我使用javascript添加或刪除類時，請重新加載頁面..

它不會工作

我嘗試了這段代碼，並將其放入 在標題上

<script>
    $(document).ready(function() {
  $('.boxAdRight').removeClass('boxAdRight').addClass('active');
});
</script>

這是我的HTML，我想刪除類boxAdRight並使用.active類進行更改

 <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="data"> <div class="getData"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="servers"> <ul> <li class="active" id="s_0"onclick="getServer(this.id,0);"> <i class="fa fa-video-camera"></i> server1 </li> </ul> </div> </div> <div class="col-md-3 col-sm-4 col-xs-12 fRight"> <div class="episodes boxAdRight"> <h2>episodes</h2> <ul> <li> <a href="http://localhost/wordpress/newarticle13/"> episode 1</a> </li> <li class="active"><a href="http://localhost/wordpress/newarticle13/"> episode 2</a> </li> </ul> </div> </div> <div class="col-md-9 col-sm-8 col-xs-12 fRight"> <div class="boxVideos"> <div class="getCode"><iframe src="https://*******" scrolling="no" frameborder="0" width="700" height="430" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe> </div> </div> </div> </div> </div> </div> </div> </div> 

謝謝

Answer 1

作為第一個觀察，我想提到一個事實，即JQuery的removeClass函數返回一個或多個用空格分隔的類名稱，應將其刪除。 因此，不應將addClass應用於removeClass的結果。

不過，您的代碼中可能還會存在其他問題...

Answer 2

將.boxAdRight類替換為.episodes類，即可根據需要使用。

  <script>
        $(document).ready(function() {
            $(".episodes").removeClass("boxAdRight").addClass("active");
       });
    </script>

Answer 3

我相信方法調用的順序應該是

$('.boxAdRight').addClass('active').removeClass('boxAdRight');    

在原始示例中， $('.boxAdRight').removeClass('boxAdRight').addClass('active'); 使用選擇器.boxAdRight ，但隨后使用.removeClass('boxAdRight')刪除.removeClass('boxAdRight') ，因此將在沒有匹配元素的選擇器上調用.addClass('active') 。

Answer 4

那樣得到它將解決它

$('.episodes').addClass('active').removeClass('boxAdRight');

在正常情況下，您也必須工作嗎？

Answer 5

您也可以通過替換類而不是刪除它來簡化此代碼。

$（'。boxAdRight'）。className ='活動';

如何用javascript替換類HTML名稱