Question

我想要点击panel1中的任何单选按钮，显示panel2单选按钮，并根据panel2单选按钮选择显示panel3选项。在窗口加载事件中隐藏panel2和panel3。仅显示第一个事件面板。我不知道我哪里出错了，请任何人都可以帮助我。

window.onload=function(){
 document.getElementById("right").style.display='none';
 document.getElementById("right1").style.display='none';
}

jQuery(function($) {

    $('a.panel').click(function() {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active');
        
        if (!$target.hasClass('active')) {
            $other.each(function(index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    left: $this.width()
                }, 500);
            });

            $target.addClass('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        }
    });
});
function accordion()
{
  if(document.getElementById("select1").checked)
  {
    document.getElementById('right').style.display='block';
	document.getElementById('right1').style.display='none';
  }
}

#left{
    position: relative;
    float: left;
    margin: 0 5px 0 0;
    border: 1px solid black;
    width: 200px;
	background-color: rgb(252, 203, 139);
    height: 300px;
    overflow: hidden;
}
#right{
/*position: relative;
float: left;*/
margin: 0 5px 0 0;
border: 1px solid black;
width: 146px;
background-color: rgb(252, 203, 139);
height: 290px;
overflow: hidden;
position: absolute;
top: 104px;
z-index: 1;
right: 1055px;
}

#right1{
margin: 0 5px 0 0;
border: 1px solid black;
width: 146px;
background-color: rgb(252, 203, 139);
height: 290px;
overflow: hidden;
position: absolute;
top: 215px;
z-index: 1;
right: 1000px;
}
div.panel {
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
}

<script src="script/jquery.min.js"></script>
<div id="left">
    <a href="#target1" class="panel" style="text-decoration:none;"><input type="radio" onclick="accordion()" name="select1" value="link1" />Option 1</a><br/>
	<a href="#target2" class="panel" style="text-decoration:none;"><input type="radio" onclick="accordion()" name="select1" value="link2" />Option 2</a><br/>
    <a href="#target3" class="panel" style="text-decoration:none;"><input type="radio" onclick="accordion()" name="select1" value="link3" />Option 3</a><br/>
</div>

<div id="right" >
  <div class="panel" id="target1" style="background:rgb(130, 236, 130)">
	<a href="#target4" id="abc" class="panel" style="text-decoration:none;"><input type="radio" name="select" value="que1" />Que1</a><br />
	<a href="#target5" class="panel" style="text-decoration:none;"><input type="radio" name="select" value="que2" />Que2</a>	<br /><br />
  </div>
  
  <div class="panel" id="target2" style="background:rgb(118, 249, 179)">
	<a href="#target6" class="panel" style="text-decoration:none;"><input type="radio" name="select" value="que3" />Que3</a><br />
	<a href="#target7" class="panel" style="text-decoration:none;"><input type="radio" name="select" value="que4" />Que4</a>	<br /><br />
  </div>
  
  <div class="panel" id="target3" style="background:rgb(249, 222, 118)">
	<a href="#target8" class="panel" style="text-decoration:none;"><input type="radio" name="select" value="que5" />Que5</a><br />
	<a href="#target9" class="panel" style="text-decoration:none;"><input type="radio" name="select" value="que6" />Que6</a>	<br /><br />
  </div>
  
</div>

<div id="right1">
  <div class="panel" id="target4" style="background:rgb(189, 181, 189)">
	<input type="radio" name="select2" value="link1" />Link1<br />
	<input type="radio" name="select2" value="link2" />Link2<br />
	<input type="radio" name="select2" value="link3" />Link3<br />
  </div>
  <div class="panel" id="target5" style="background:rgb(130, 204, 236)">
	<input type="radio" name="select2" value="link4" />Link4<br />
	<input type="radio" name="select2" value="link5" />Link5<br />
	<input type="radio" name="select2" value="link6" />Link6<br />
  </div>
  <div class="panel" id="target6" style="background:rgb(189, 181, 189)">
	<input type="radio" name="select2" value="link1" />Link1<br />
	<input type="radio" name="select2" value="link2" />Link2<br />
	<input type="radio" name="select2" value="link3" />Link3<br />
  </div>
  <div class="panel" id="target7" style="background:rgb(130, 204, 236)">
	<input type="radio" name="select2" value="link4" />Link4<br />
	<input type="radio" name="select2" value="link5" />Link5<br />
	<input type="radio" name="select2" value="link6" />Link6<br />
  </div>
  <div class="panel" id="target8" style="background:rgb(189, 181, 189))">
	<input type="radio" name="select2" value="link1" />Link1<br />
	<input type="radio" name="select2" value="link2" />Link2<br />
	<input type="radio" name="select2" value="link3" />Link3<br />
  </div>
  <div class="panel" id="target9" style="background:rgb(130, 204, 236)">
	<input type="radio" name="select2" value="link4" />Link4<br />
	<input type="radio" name="select2" value="link5" />Link5<br />
	<input type="radio" name="select2" value="link6" />Link6<br />
  </div>
</div>

Answer 1

您的代码中有2个错误。

在一半的代码中，您使用的是jquery代码和vanilla javascript中的一些代码（概念上没有错误。）但您可以使用jquery编写更好的代码。
您正在检查document.getElementById（“select1”）。已选中。但是你的代码中没有“select1”ID。你添加了名字“select1”

如果您在代码中进行了以下更改，则可以看到代码正在运行

function accordion() {
  if($("#left input[type=radio]:checked").length > 0){
    document.getElementById('right').style.display='block';
    document.getElementById('right1').style.display='none';
  }
}

希望这有帮助

如何在javascript中显示面板中的单选按钮

1 个答案: