javascript - 无法读取 null 的属性 'removeClass'

Question

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

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

上面写着*

Uncaught TypeError: Cannot read property 'removeClass' of null

• 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>

Answer 1

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

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

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

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

元素将变成这样:

<div id="tab1">

现在，没有带有 active 类的 div，你的第二条语句将找不到任何匹配的元素，你将得到异常。