Question

我在网站上工作，当用户点击菜单时，我有一个包含隐藏/显示元素的部分。

问题在于：

＆＃13;

$('[id^="answer"]').hide();

$('[class^="test"]').on('click', function(e){

    e.preventDefault();

    var numb = this.className.replace('test', '');

		$('[id^="answer"]').hide();
		$('#answer' + numb).show();



});


$(document).ready(function(){
  $('a').click(function(){
    $('a').removeClass("active");
    $(this).addClass("active");

});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="test3" href="#">> test</a>

<div id="answer3">
	 			<div class="center">
	 					<p>hello</p>
	 			</div>
</div>

＆＃13;

Answer 1

我在JSBin中尝试过它并且无法重现错误：

<a class="test2" href="#">Test 2</a>
<a class="test3" href="#">Test 3</a>

<div id="answer2">
  Answer2
</div>

<div id="answer3">
  Answer3
</div>

<script>
  $('[id^="answer"]').hide();

  $('[class^="test"]').on('click', function(e){

    e.preventDefault();

    var numb = this.className.replace('test', '');

        $('[id^="answer"]').hide();
        $('#answer' + numb).show();

  });
</script>

https://jsbin.com/kekidusogo/edit?html,console,output

Answer 2

这可能就是你要找的......

您的"active"课程出现问题。将此类附加到<a>标记后，您var numb = this.className.replace('test', '');变为"3 active"，这不是您要查找的内容。在这种情况下，无论其他类如何，您都希望它始终为"3"。这就是为什么我添加了一个循环只检查"test*"类：

$('[id^="answer"]').hide();

$('[class^="test"]').on('click', function(e){
    e.preventDefault();

    var classes = this.className.split(" ");
    var length = classes.length;
    var numb;
    
    for(var i = 0; i < length; i++){
     if (classes[i].indexOf('test') < 0) break;
     numb = classes[i].replace('test', '');
    }

    $('#answer' + numb).toggle();

});


$(document).ready(function(){
  $('a').click(function(){
    $('a').removeClass("active");
    $(this).addClass("active");

});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="test3" href="#">> test</a>

<div id="answer3">
	 			<div class="center">
	 					<p>hello</p>
	 			</div>
</div>

脚本问题 - 隐藏/显示元素

2 个答案: