javascript - 无法读取null的属性“removeClass”

我尝试使用Sourcerer插件在joomla中使用jquery进行制表，但这并不重要。

我的代码可以在jsfiddle和本地.html文档中完美运行，但不能在实时网站上运行。

它写*


  未捕获的TypeError：无法读取null的属性'removeClass'



7串


这是一个代码：

$(function(){
		$('.tabs').on('click','a',function(e){
			e.preventDefault();
			$hash = this.hash;
			$link = $(this);

      if ($link.parent('.active')){
			$('.tabs-block .active').removeClass('active');

			$('div.active').removeClass('active');
			$($hash).addClass('active');
			$link.parent().addClass('active');
      }
		})

})

.tabs-block div{display:none;}
.tabs li{display:inline-block;}
ul.tabs{margin:0;position: relative;top: 2px;}
.tabs li {border:solid 2px #448ebe;border-bottom:none;border-radius: 5px 5px 0 0;}
.tabs li.active{background-color:#fff;border-color:#66b366;opacity:1;}
.tabs-block div.active {display:block;	border: solid #66b366 2px;border-radius: 5px;padding-left:10px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs-block">
<ul class="tabs">
<li class="active"><a href="#tab1"><img src="/images/other/fb.png"></a></li>
<li><a href="#tab2"><img src="/images/other/i.png"></a></li>
<li><a href="#tab3"><img src="/images/other/tw.png"></a></li>
<li><a href="#tab4"><img src="/images/other/vk_2.png"></a></li>
</ul>
<div class="active" id="tab1">
<p>Tab 1</p>
</div>
<div class="" id="tab2">
<p>Tab 2</p>
</div>
<div class="" id="tab3">
<p>Tab 3</p>
</div>
<div class="" id="tab4">
<p>Tab 4</p>
</div>
</div>

最佳答案

能请您仔细检查一下您的逻辑吗？

$('.tabs-block .active').removeClass('active');
$('div.active').removeClass('active');

在第一行中，您将删除“活动”类，该类也将从元素下面移除。

<div class="active" id="tab1">

而elment将变成这样：

<div id="tab1">

现在，没有div具有活动类，并且您的第二条语句将找不到任何匹配的元素，并且您将获得异常。

关于javascript - 无法读取null的属性“removeClass”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38967450/