Question

我试图隐藏并显示关于单击单选按钮的段落。此外，我希望当用户登陆页面时，第一个单选按钮处于活动状态。

这是我的HTML：

<div class="BusinessForm">
  <p class="showBusinessForm" style="display:none">Business</p>
</div>
<div class="TechnicalForm">
  <p class="showTechnicalForm" style="display:none">Technical</p>
</div>
<div class="LoginForm">
  <p class="showLoginForm" style="display:none">login</p>
</div>

这是我的JS代码：

$(document).ready(function() {
    $(".showBusinessForm").show();
});
$(".showBusinessForm").click(function(){
    $(".showTechnicalForm").hide();
    $(".showLoginForm").hide();
    $(".showBusinessForm").show();
});
$(".showTechnicalForm").click(function(){
    $(".showTechnicalForm").show();
    $(".showLoginForm").hide();
    $(".showBusinessForm").hide();
});
$(".showLoginForm").click(function(){
    $(".showTechnicalForm").hide();
    $(".showLoginForm").show();
    $(".showBusinessForm").hide();
});

Answer 1

我建议您采用动态方法，而不是针对每个div。

您可以使用表格的值和类别选择目标表格，以便用您的收音机btn显示。

$(".radiobtn").click(function(){
  $(".form").hide();
  $("."+$(this).val()).show();
})

.form{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Business <input type="radio" class="radiobtn" value="BusinessForm" name="showForm"/>
Technical <input type="radio" class="radiobtn" value="TechnicalForm" name="showForm"/>
Login <input type="radio" class="radiobtn" value="LoginForm" name="showForm"/>

<div class="form BusinessForm">
  <p>Business</p>
</div>
<div class="form TechnicalForm">
  <p>Technical</p>
</div>
<div class="form LoginForm">
  <p>login</p>
</div>

Answer 2

我不想太多地修改你的脚本。这是基于您的脚本的工作示例

＆＃13;

opacity: 0;

＆＃13;

.main-navigation ul ul

＆＃13;

如何隐藏和显示单击单选按钮上的段落

2 个答案: