用jquery制作一个网页，简单一点的，专业人士来解决一下
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用jquery制作一个网页，简单一点的，专业人士来解决一下相关的知识，希望对你有一定的参考价值。
学计算机的
你好，直接复制以下代码并保存即可。
若有帮助，请采纳。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Tab Host Demo</title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<style>
// 使得UL中的li标签水平排列
ul
display:inline;
white-space: nowrap;
li
margin:3px;
float:left;
background:red;
display:inline-block;
.tab_menu
list-style:none; /* 去掉ul前面的符号 */
margin: 0px; /* 与外界元素的距离为0 */
padding: 0px; /* 与内部元素的距离为0 */
width: auto; /* 宽度根据元素内容调整 */
.tab_box
background-color: #465c71; /* 背景色 */
border: 1px #4e667d solid; /* 边框 */
color: #dde4ec; /* 文字颜色 */
display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */
line-height: 1.35em; /* 行高 */
padding: 4px 20px; /* 内部填充的距离 */
text-decoration: none; /* 不显示超链接下划线 */
white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
.selected
background-color: green;
display: block;
.hide
display: none;
</style>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
</div><br><br><br>
<div class="tab_box">
<div>选项卡1:这里是1号内容区域</div>
<div class="hide">选项卡2：这里是2号内容区域</div>
<div class="hide">选项卡3：这里是3号内容区域</div>
</div>
</div>
<script>
// 加上鼠标的点击效果
$(function()
$("ul li").click(function()
$(this).addClass("selected").siblings().removeClass("selected");
var index = $("ul li").index(this);
$("div.tab_box > div").eq(index).show().siblings().hide();
)
)
// 加上鼠标悬浮效果
$(function()
$("div.tab_menu ul li").hover(function()
$(this).addClass("selected").show();
// 下面的这个可以实现选项卡的联动效果
var index = $("ul li").index(this);
$("div.tab_box > div").eq(index).show().siblings().hide();
,function()
$(this).removeClass("selected").show();
// 下面的这个可以实现选项卡的联动效果
var index = $("ul li").index(this);
$("div.tab_box > div").eq(index).show().siblings().hide();
)
)
</script>
</body> 参考技术A 可以上网站上去下载一些相关的插件，或者是参考一些已经制作好的，寻找灵感。 参考技术B jQuery只是个javascript库而已，你这问题问得有问题，你得先大概描述下需求，然后别人才能更好的作答，不然别人不能凭空造车啊 参考技术C 请明确需求。 参考技术D 百度
JQuery制作简单的网页导航特效
使用JQuery中hover()方法，使其根据鼠标的移动简单的改变背景颜色;
hover();用于模拟鼠标指针悬停事件，当鼠标指针移动到元素上时，会触发指定的第一个函数，当鼠标指针移除这个元素时，会触发第二个函数；类似于mouseover和mouseout组合具体的代码如下：
html代码：
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">身边导航</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">电影</a></li>
<li><a href="#">KTV</a></li>
<li><a href="#">酒店</a></li>
<li><a href="#">购物</a></li>
</ul>
</div>
css：
.nav{
margin:0;
padding:0px;
width:800px;
height:100px;}
.nav ul{
list-style:none;
}
a{
text-decoration:none;}
.nav ul li{
width:100px;
height:50px;
line-height:50px;
background-color:#999;
display:inline;
float:left;
text-align:center;
font-size:18px;
font-weight:bold;
}
Jq:
$(function(){
/*
导航背景颜色切换效果 hover()
*/
$("li").hover(function(){
$(this).css("background-color","#C60");
},
function(){
$(this).css("background-color","#999");
});
});
以上是关于用jquery制作一个网页，简单一点的，专业人士来解决一下的主要内容，如果未能解决你的问题，请参考以下文章