1
다음은 탭을 만드는 코드입니다. 각각 하나의 드롭 다운 내가 가치를 선택하면 india는 각 탭에서 특정 탭에 표시해야합니다 숨겨진 된 텍스트 상자에 값을 선택하는 경우 인도는 tab1 드롭 다운 숨겨진 된 텍스트 상자 tab2 및 tab3 표시하지 않아야합니다 및 w3 변경해야합니다. 빨간색 # 00a8a8 색상 -border숨겨진 텍스트가 숨겨져 표시되지 않습니다.
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("sendingType");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(
" w3-border-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.firstElementChild.className += " w3-border-red";
}
$(document).ready(function() {
$("#ddlPassport").change(function() {
if ($(this).val() == "Y") {
$("#dvPassport").show();
} else {
$("#dvPassport").hide();
}
});
});
$(document).ready(function() {
$("#ddlPassport1").change(function() {
if ($(this).val() == "Y") {
$("#dvPassport").show();
} else {
$("#dvPassport").hide();
}
});
});
$(document).ready(function() {
$("#ddlPassport2").change(function() {
if ($(this).val() == "Y") {
$("#dvPassport").show();
} else {
$("#dvPassport").hide();
}
});
});.sendingType {
display: none;
}<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body class="w3-container">
<h2>Tabs in a Grid</h2>
<div class="w3-row">
<a href="#" onclick="openCity(event, 't1');">
<div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab1
</div>
</a>
<a href="#" onclick="openCity(event, 't2');">
<div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab2</div>
</a>
<a href="#" onclick="openCity(event, 't3');">
<div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab3</div>
</a>
</div>
<br>
<div id="t1" class="w3-container sendingType">
<div class="form-group">
<label class="col-xs-1 control-label">dropdown</label>
<div class="col-xs-3">
<select name="country" class="form-control" id="ddlPassport">
<option value="">Select a country</option>
<option value="Y">india</option>
<option value="N">america</option>
</select>
</div>
</div>
<div id="dvPassport" style="display: none">
<div class="form-group">
<label class="col-xs-1 control-label">Text box</label>
<div class="col-xs-3">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div id="t2" class="w3-container sendingType">
<div class="form-group">
<label class="col-xs-1 control-label">dropdown</label>
<div class="col-xs-3">
<select name="country" class="form-control" id="ddlPassport1">
<option value="">Select a country</option>
<option value="Y">india</option>
<option value="N">america</option>
</select>
</div>
</div>
<div id="dvPassport1" style="display: none">
<div class="form-group">
<label class="col-xs-1 control-label">Text box</label>
<div class="col-xs-3">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div id="t3" class="w3-container sendingType">
<div class="form-group">
<label class="col-xs-1 control-label">dropdown</label>
<div class="col-xs-3">
<select name="country" class="form-control" id="ddlPassport2">
<option value="">Select a country</option>
<option value="Y">india</option>
<option value="N">america</option>
</select>
</div>
</div>
<div id="dvPassport2" style="display: none">
<div class="form-group">
<label class="col-xs-1 control-label">Text box</label>
<div class="col-xs-3">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</body>
'숨겨진 텍스트 상자가 각 탭에 표시되지 않습니다.'라는 제목을 친절하게 변경하면 좋지 않습니다. ** 숨겨진 텍스트가 숨겨져 표시되지 않습니다 ** – guradio
정말요? '$ (this) .val()'? jQuery가 당신의 두뇌를 먹었습니다. 당신은 'this.value'에 대해서조차 모릅니다. 그렇죠? 웹 개발이 실패합니다. – Azamantes
@Azamantes'$ (this) .val()'의 무엇이 잘못 되었습니까? – guradio