選択リストの変更イベントに接続された単純なタブ機能を使用しています。
リストからオプションを選択すると機能します。だからそれは問題ではありません。
しかし、ページが最初に読み込まれるときに、デフォルトのタブ（選択済み）が表示されます。現時点では、「フリート」で選択されたアイテムです。方法がわからないので、どうすれば修正できますか。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="dds" id="categories" onchange="getelementfromdropdown()">
<option value="Friet" selected>Friet</option>
<option value="Vegetarisch">Vegetarisch</option>
<option value="Snacks">Snacks</option>
<option value="Broodjes">Broodjes</option>
<option value="Kapsalon">Kapsalon</option>
<option value="Schotels">Schotels</option>
<option value="Menus">Menu's</option>
<option value="Diversen">Diversen & (fris)drank</option>
</select>
<div id="Friet" class="tabcontent"></div>
<script language="javascript">
$(document).ready(function () {
$("#categories").change(function () {
getelementfromdropdown();
});
});
function getelementfromdropdown() {
var value = $("#categories").val();
openTab(event, value);
};
function openTab(evt, Name) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(Name).style.display = "block";
evt.currentTarget.className += " active";
}
</script>たとえば、1つのdivタブを追加しただけです。他のタブも利用できます。:)
誰かが私を助けてくれませんか..私はほぼ1時間それを修正しようとしていて、解決策を見つけることができません。
非常に古いコードがいくつかあり、これを必要以上に複雑にしています。詳細については、コメントを参照してください。
/* Work with classes, not inline styles */
.hidden { display:none; }
.active { border:1px solid red; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- If an <option> doesn't specify a value, then its value becomes its text -->
<!-- You had an onchange event attribute here. Don't do that, it's not 1998! -->
<select class="dds" id="categories">
<option selected>Friet</option>
<option>Vegetarisch</option>
<option>Snacks</option>
<option>Broodjes</option>
<option>Kapsalon</option>
<option>Schotels</option>
<option value="Menus">Menu's</option>
<option value="Diversen">Diversen & (fris)drank</option>
</select>
<!-- All tabs start out hidden and not active -->
<div id="Friet" class="tabcontent hidden">Friet</div>
<div id="Vegetarisch" class="tabcontent hidden">Vegetarisch</div>
<div id="Snacks" class="tabcontent hidden">Snacks</div>
<div id="Broodjes" class="tabcontent hidden">Broodjes</div>
<div id="Kapsalon" class="tabcontent hidden">Kapsalon</div>
<div id="Schotels" class="tabcontent hidden">Schotels</div>
<div id="Menus" class="tabcontent hidden">Menus</div>
<div id="Diversen" class="tabcontent hidden">Diversen</div>
<!-- language="javascript" hasn't been needed for almost 10 years -->
<script>
// If you place your <script> just before the closing "body" tag,
// then there's no need to place code inside of document.ready().
// The following code will just run as soon as the DOM is ready.
// Show the selected option upon page load and make it active
// by just finding the element who's id is the currently selected
// value in the <select>
$("#" + $("#categories").val()).show().addClass("active");
// No need to have a function that only calls another one
$("#categories").change(function (event){
$(".tabcontent").hide().removeClass("active"); // Hide all the tabs and remove any active tab
$("#" + $(this).val()).show().addClass("active"); // Show the selected tab and make it active
});
</script>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加