我确定这是愚蠢的我不知道但是在这里和jsfiddle上搜索之后我还没有能够弄清楚如何从jsfiddle获取工作脚本来处理我的工作本地服务器。我有javascript,加载了jquery和html,但它不起作用。为了让jsfiddle脚本在服务器上运行,我还需要做些什么吗?
这是我的测试页面: http://waterwalkmedia.com/link-test.html
好的,再试一次。在jsfiddle上有以下代码:
这是HTML代码:
<div id="stateSelection">Jump to State: <a id="Conn" class="state-link" data-region-type="4" data-region-code="09" href="#">Connecticut</a> | <a id="Maine" class="state-link" data-region-type="4" data-region-code="23" href="#">Maine</a> | <a id="Mass" class="state-link" data-region-type="4" data-region-code="25" href="#">Massachusetts</a> | <a id="Rh" class="state-link" data-region-type="4" data-region-code="44" href="#">Rhode Island</a>
</div> <span class="lbl">Display by: </span>
<a id="ctyRegion" class="map-type-link" region_type="1" href="javascript://">County</a> | <a id="msaRegion" class="map-type-link" region_type="2" href="javascript://">Metro-Area</a>
</div>
这是javascript:
$('#msaRegion').click(function () {
$(".state-link").addClass('disableClass');
});
$('#ctyRegion').click(function () {
$(".state-link").removeClass('disableClass');
});
这是CSS:
a {
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}
a:link, a:visited, a:active, a:hover {
color: #333;
}
a:hover {
background-color: #c7d1d6;
}
.disableClass {
pointer-events:none;
text-decoration:none;
opacity: 0.4;
cursor:default;
}
.enableClass {
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
opacity:1;
pointer-events:all;
cursor:default;
}
实际工作jsfiddle的链接是:http://jsfiddle.net/8u4jw72h/1/
提前致谢。
答案 0 :(得分:1)
将代码放在$(document).ready()
中,以便在加载DOM后运行。
$(document).ready(function() {
$('#msaRegion').click(function () {
$(".state-link").addClass('disableClass');
});
$('#ctyRegion').click(function () {
$(".state-link").removeClass('disableClass');
});
});
它适用于jsfiddle,因为您使用了默认的onLoad
选项。