Jquery專案實操練習
阿新 • • 發佈：2018-12-12
專案練習網址
1、專案一：tab選項卡
html語句：
<!DOCTYPE html>
<lang="en">
<head>
<script src="jquery-3.3.1.js"></script>
<script src="test.js"></script>
<link type="text/css" rel="styleSheet" href="test.css" </head> <body>
< css語句：
* {
margin: 0px;
padding: 0px
}
.tab {
width: 99%;
margin: 20px auto;
border: 5px solid #cccccc;
}
.tab ul {
height: 40px;
line-height: 40px;
}
.tab ul li{
list-style: none;
float: left;
height: 40px;
line-height: 40px;
width: 33%;
text-align: center;
background-color: dodgerblue;
margin-right: 2px;
cursor: pointer;
font-family: 華文琥珀;
font: bold;
}
.tab ul li.active{
background-color: aqua;
}
.tab ul li:first-child{
margin-left: 5px;
}
.tab ul li:last-child{
margin-right: 0px;
}
.tab-content div{
display: none;
height: 500px;
}
.local-new{
padding: 20px;
}
fieldset{
margin: 50px;
padding: 20px;
}
input[type='text']:focus{
background-color: lightyellow;
}
input[type='radio']:checked+label{
font-weight: bold;
}
#nextstep :disabled{
background-color: #ccc;
}
#nextstep :enabled{
font-weight: bold;
font-style: italic;
}
p:lang(zh-cn){
font-family: 微軟雅黑；
}
p:lang(us-en){
font-family: Arial, Helvetica, sans-serif;
}
html語句：
$(function () {
$('.tab ul li').mouseover(function () {
$(this).addClass('active').siblings().removeClass('active');
$('.tab-content>div:eq(' + $(this).index() + ')').css('display', 'block').siblings().css('display', 'none');
});
$('#agree').change(function () {
// console.log(!$(this).attr('ch?ecked'));
$('#nextstep').prop('disabled',!$(this).prop('checked'));//說明在chrome瀏覽器中，不能用click事件來修改disabled屬性值，要不在瀏覽器中不能呈現效果。
});
})