new388.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap + jsp 的使用</title>
<link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
<script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
<script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
//重复执行动画
var action = function () {
$("#div2").toggle(2000,action);
};
action();
});
</script>
</head>
<body>
<div style="background-color: #1b6d85;width: 400px;height: 400px;" id="div2">
div
</div>
</body>
</html>
new389.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap + jsp 的使用</title>
<link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
<script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
<script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
<style type="text/css">
.box{
width: 600px;
height: 300px;
margin: auto;
}
.box ul{
list-style: none;
}
.box ul li{
float: left;
width: 150px;
height: 30px;
margin-left: 35px;
font-size: 20px;
margin-top: 5px;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: none;
}
</style>
<script type="text/javascript">
$(function () {
//
$("li:gt(5):not(:last)").hide();
$("div div a").click(function () {
$("li:gt(5):not(:last)").toggle();
var status = $("li:gt(5):not(:last)").is(":hidden");
if (status)
{
$("div div a span").text("更多品牌");
}
else
{
$("div div a span").text("折叠显示");
}
return false;
});
});
</script>
</head>
<body>
<div class="box">
<ul>
<li><a href="#">佳能<i>(999)</i></a></li>
<li><a href="#">索尼<i>(999)</i></a></li>
<li><a href="#">三星<i>(999)</i></a></li>
<li><a href="#">尼康<i>(999)</i></a></li>
<li><a href="#">松下<i>(999)</i></a></li>
<li><a href="#">卡西欧<i>(999)</i></a></li>
<li><a href="#">富士<i>(999)</i></a></li>
<li><a href="#">柯达<i>(999)</i></a></li>
<li><a href="#">奥林巴斯<i>(999)</i></a></li>
<li><a href="#">明基<i>(999)</i></a></li>
<li><a href="#">爱国者<i>(999)</i></a></li>
<li><a href="#">华为<i>(999)</i></a></li>
<li><a href="#">神舟<i>(999)</i></a></li>
<li><a href="#">大地<i>(999)</i></a></li>
<li><a href="#">欧柏<i>(999)</i></a></li>
<li><a href="#">其他品牌<i>(999)</i></a></li>
</ul>
<div style="margin: auto;width: 200px;height: 40px;clear: both;padding-top: 50px;">
<a href="#"><span>更多品牌</span></a>
</div>
</div>
</body>
</html>
new390.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap + jsp 的使用</title>
<link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
<script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
<script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
<style type="text/css">
div{
width: 400px;
height: 250px;
background-color: #0e8385;
font-size: 16px;
}
div span{
display: inline-block;
width: 99%;
height: 50px;
background-color: #2aabd2;
margin-top: 100px;
}
</style>
<script type="text/javascript">
$(function () {
//
$("div").click(function () {
alert("事件冒泡，我是div。");
});
$("span").click(function () {
alert("事件冒泡，我是span。");
});
})
</script>
</head>
<body>
<div>
div文字
<span>span文字</span>
div文字
</div>
</body>
</html>