HTML和jQuery的学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- src路径 alt图像不能显示时，显示文字 title鼠标悬停时显示的内容
图像对齐-align-left-right-top-middle-bottom -->
<img src="1.jpg" title="java,c,c#">
<a href="跳转目标" target="目标窗口的弹出方式">
</body>
</html>
jQuery列表展出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style type="text/css">
.nav-list{width: 230px;}
.nav-list h3{border-top: 1px solid #ccc;background: #333;font-size: 16px;
font-weight: normal;padding: 10px 20px;margin:0px;color: #fff;cursor: pointer;}
.nav-list ul{list-style: none;padding: 0;margin:0;}
.nav-list li a{text-decoration: none;display: block;padding: 10px 20px;color: #999;
background: #f5f5f5;border:1px solid #ccc;border-bottom: none; }
.nav-list ul{display: none;}
.nav-list ul.open{display: block;}
</style>
</head>
<body>
<div class="nav-list">
<h3>选择器</h3>
<ul>
<li><a herf="#">基本选择器</a></li>
<li><a herf="#">层级选择器</a></li>
<li><a herf="#">过滤选择器</a></li>
<li><a herf="#">属性选择器</a></li>
<li><a herf="#">内容选择器</a></li>
</ul>
<h3>筛选</h3>
<ul>
<li><a herf="#">过滤</a></li>
<li><a herf="#">查找</a></li>
<li><a herf="#">关联</a></li>
<li><a herf="#">DOM操作</a></li>
</ul>
<h3>样式</h3>
<ul>
<li><a herf="#">CSS操作</a></li>
<li><a herf="#">位置</a></li>
<li><a herf="#">尺寸</a></li>
</ul>
<h3>属性</h3>
<ul>
<li><a herf="#">属性操作</a></li>
<li><a herf="#">文本</a></li>
<li><a herf="#">代码</a></li>
<li><a herf="#">文本</a></li>
<li><a herf="#">CSS类</a></li>
</ul>
</div>
<script type="text/javascript">
$('h3').click(function(){
$(this).next().toggleClass('open');
})
</script>
</body>
</html>
浙公网安备 33010602011771号