1
以下は私がタブを作成するコードです。それぞれ私は1つのドロップダウン私は値を選択するとき私は値を選択すると、タブのドロップダウンの非表示のテキストボックス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