JQuery 更改 href 的脚本不起作用
JQuery Script to change href not working
我想用单选选项更改 CSS 文件,但我就是无法使脚本工作。我插入了一些代码来测试它,但它也不起作用。我正在使用 Bootstrap 框架,它工作正常,CSS 文件也可以。
我的 HTML 文件:
<!DOCTYPE html>
<html>
<head>
<link id="estilos" rel="stylesheet" type="text/css" href="./BootstrapColorSchemes/hefestus.css" >
<title>Spider Magic</title>
</head>
<body>
<div class="container">
<form class="form-horizontal" id="myForm">
<div class="radio-inline">
<label><input type="radio" name="optradio"
value="./BootstrapColorSchemes/adventuetime1.css">AT1</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="optradio"
value="./BootstrapColorSchemes/adventuretime2.css">AT2</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="optradio"
value="./BootstrapColorSchemes/adventuretime3.css">AT3</label>
</div>
</form>
</div>
<div>This border should be red</div>
<script src="./js/jquery-2.1.4.min.js"/>
<script>
$(document).ready(function(){
console.log('i am ready');
$("div").css("border", "3px solid red");
$('#myForm input').on('change',function(){
var selected=$('input[name="optradio"]:checked','#myForm').val();
$('#estilos').attr('href',selected);
alert(selected)
});
});</script>
<script src="./js/bootstrap.min.js"/>
</body>
</html>
脚本标签不能用solidus自动关闭需要关闭标签:
<script src="./js/bootstrap.min.js"></script>
并更改 css 这应该有效:
$('.radio-inline').click(function() {
$('#estilos').attr('href', $(this).val());
});
我想用单选选项更改 CSS 文件,但我就是无法使脚本工作。我插入了一些代码来测试它,但它也不起作用。我正在使用 Bootstrap 框架,它工作正常,CSS 文件也可以。
我的 HTML 文件:
<!DOCTYPE html>
<html>
<head>
<link id="estilos" rel="stylesheet" type="text/css" href="./BootstrapColorSchemes/hefestus.css" >
<title>Spider Magic</title>
</head>
<body>
<div class="container">
<form class="form-horizontal" id="myForm">
<div class="radio-inline">
<label><input type="radio" name="optradio"
value="./BootstrapColorSchemes/adventuetime1.css">AT1</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="optradio"
value="./BootstrapColorSchemes/adventuretime2.css">AT2</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="optradio"
value="./BootstrapColorSchemes/adventuretime3.css">AT3</label>
</div>
</form>
</div>
<div>This border should be red</div>
<script src="./js/jquery-2.1.4.min.js"/>
<script>
$(document).ready(function(){
console.log('i am ready');
$("div").css("border", "3px solid red");
$('#myForm input').on('change',function(){
var selected=$('input[name="optradio"]:checked','#myForm').val();
$('#estilos').attr('href',selected);
alert(selected)
});
});</script>
<script src="./js/bootstrap.min.js"/>
</body>
</html>
脚本标签不能用solidus自动关闭需要关闭标签:
<script src="./js/bootstrap.min.js"></script>
并更改 css 这应该有效:
$('.radio-inline').click(function() {
$('#estilos').attr('href', $(this).val());
});