您好。 任何帮助将不胜感激!
我有一个 html 文件，其中有一个带有 5 个选项的选择下拉菜单，在它的正下方将有一个尚未确定的链接数量。
当用户到达此页面时，下拉菜单将位于其默认选项中，即“选择一个选项”。在这种状态下，下面的所有链接都应该不可点击并显示为灰色(禁用)。
然后，根据用户从下拉菜单中的选择，下面的一些链接应将其颜色更改为蓝色并应变为可点击，而其他一些应保持不可点击并显示为灰色。
我们需要这个的原因是因为链接指向资源，而并非所有资源都可用于下拉菜单中的所有选项。
我没有使用 Javascript/JQuery 的经验，所以我知道如何应用样式，但不知道如何有条件地应用。
.select-box {
border-radius: 5px;
font-size: 18px;
height: 35px;
width: 200px;
}
.resource-link {
border: solid;
border-width: 4px;
border-color: grey;
border-radius: 10px;
color: grey;
display: inline-block;
height: 40px;
margin-right: 75px;
margin-top: 20px;
text-align: center;
width: 100px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<select class="select-box">
<option value="choose">Choose an option</option>
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
<option value="Option3">Option 3</option>
<option value="Option4">Option 4</option>
<option value="Option5">Option 5</option>
</select>
<ul >
<a href="resource1.html">
<div class="resource-link">
Link to Resource 1
</div>
</a>
<a href="resource2.html">
<div class="resource-link">
Link to Resource 2
</div>
</a>
<a href="resource3.html">
<div class="resource-link">
Link to Resource 3
</div>
</a>
<a href="resource4.html">
<div class="resource-link">
Link to Resource 4
</div>
</a>
<a href="resource5.html">
<div class="resource-link">
Link to Resource 5
</div>
</a>
</ul>
</body>
</html>最佳答案
使用 jQuery 并执行如下操作:
$('.select-box').on('change', function() {
$('.link').attr('disabled','disabled');
$('.link.' + $(this).val()).removeAttr('disabled');
});
然后在每个链接上放置适当的类，如下所示:
<a href="whatever" class="link option1" disabled>whatever</a>
关于javascript - 如何根据用户从 - 选择下拉菜单中所做的选择启用/禁用和更改某些链接的颜色 -，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42727557/