Question

使用下面的代码，我尝试实现以下内容：单击“是”时，应显示“此处是功能部分的外观”，单击“否”时，应显示“返回”。

/* Custom Radio Button Start*/

.radiotextsty {
  color: #A5A4BF;
  font-size: 18px;
}

.customradio {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.customradio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: white;
  border-radius: 50%;
  border:1px solid #BEBEBE;
}

/* On mouse-over, add a grey background color */
.customradio:hover input ~ .checkmark {
  background-color: transparent;
}

/* When the radio button is checked, add a blue background */
.customradio input:checked ~ .checkmark {
  background-color: white;
  border:1px solid #BEBEBE;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.customradio input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.customradio .checkmark:after {
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #A3A0FB;
}

/* Custom Radio Button End*/

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
	<div class="row">
		<div class="col-md-4 col-sm-4 col-xs-12 form-group">
			<label class="labeltext">Do u Like Me ?</label><br>
			<div class="form-check-inline">
				<label class="customradio"><span class="radiotextsty">Yes</span>
					<input type="radio" data-target="#tab1" checked="checked" name="radio">
					<span class="checkmark"></span>
				</label>
				<label class="customradio"><span class="radiotextsty">No</span>
					<input type="radio" name="radio" data-target="#tab2">
					<span class="checkmark"></span>
				</label>
			</div>
			<div class="tab-content">
				<div class="tab-pane active" id="tab1">
					<div class="form-check-inline">
						<p>Here is how a feature section would look like</p>
					</div>
				</div>
				<div class="tab-pane active" id="tab2">
					<div class="form-check-inline">
						<p>Go Back </p>
					</div>
				</div>
		</div>
	</div>
</div>

是否可以仅使用点来制作单选按钮选项卡？就像给定的图片。正如我所提到的，上面的代码在单击“是”时应显示“此处是功能部分的外观”，在单击“否”时应显示“返回”。

Answer 1

https://www.tutorialrepublic.com/faq/show-hide-divs-based-on-radio-button-selection-in-jquery.php

我认为这对您有帮助

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    });
});

.box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
    label{ margin-right: 15px; }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Radio Buttons</title>
</head>
<body>
    <div>
        <label><input type="radio" name="colorRadio" value="red"> red</label>
        <label><input type="radio" name="colorRadio" value="green"> green</label>
        <label><input type="radio" name="colorRadio" value="blue"> blue</label>
    </div>
    <div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
    <div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>
    
    
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

</body>
</html>

可以仅通过使用点来制作单选按钮选项卡

1 个答案: