jQuery 导航栏中选中第一个li为固定颜色,鼠标经过第二个li的时候改变颜色事件
时间: 2024-02-12 08:03:09 浏览: 41
可以使用以下代码实现:
```javascript
$(document).ready(function() {
// 默认选中第一个li
$("ul li:first").addClass("active");
// 鼠标经过第二个li时改变颜色
$("ul li:nth-child(2)").hover(
function() {
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
}
);
});
```
其中,我们使用 `addClass()` 方法为第一个 li 添加 `active` 类,以固定其颜色。使用 `hover()` 方法为第二个 li 绑定鼠标移入和移出事件,当鼠标移入时添加 `hover` 类,移出时移除该类,以实现改变颜色的效果。需要在 CSS 中定义 `active` 和 `hover` 类的样式。
相关问题
jQuery实现侧边导航栏固定
1. 首先需要给导航栏添加一个class,例如"fixed-sidebar"
2. 使用jQuery监听窗口滚动事件$(window).scroll(function(){})
3. 在滚动事件中获取导航栏的位置和距离窗口顶部的距离,并判断是否需要固定导航栏
4. 如果需要固定,则给导航栏添加一个"fixed"的class,并设置其position为fixed,top值为0
5. 如果不需要固定,则移除"fixed"的class,恢复原来的样式
示例代码:
HTML:
<nav class="fixed-sidebar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>
CSS:
.fixed-sidebar {
position: absolute;
top: 0;
width: 200px;
}
.fixed {
position: fixed;
top: 0;
}
JS:
$(document).ready(function() {
$(window).scroll(function() {
var navPosition = $('.fixed-sidebar').offset().top;
var scrollPosition = $(window).scrollTop();
if (scrollPosition >= navPosition) {
$('.fixed-sidebar').addClass('fixed');
} else {
$('.fixed-sidebar').removeClass('fixed');
}
});
});
写一个有导航栏有轮播的主页框架,jQuery代码
以下是一个简单的有导航栏和轮播图的主页框架,使用了jQuery技术:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>导航栏和轮播图主页框架</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<section id="slider">
<div class="slide active-slide">
<img src="slide1.jpg">
<div class="slide-caption">
<h2>第一张图片标题</h2>
<p>第一张图片描述内容</p>
</div>
</div>
<div class="slide">
<img src="slide2.jpg">
<div class="slide-caption">
<h2>第二张图片标题</h2>
<p>第二张图片描述内容</p>
</div>
</div>
<div class="slide">
<img src="slide3.jpg">
<div class="slide-caption">
<h2>第三张图片标题</h2>
<p>第三张图片描述内容</p>
</div>
</div>
</section>
</body>
</html>
```
CSS代码:
```
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
#slider {
position: relative;
overflow: hidden;
}
#slider .slide {
position: absolute;
top: 0;
left: 0;
height: 500px;
width: 100%;
display: none;
}
#slider .active-slide {
display: block;
}
#slider .slide img {
height: 500px;
width: 100%;
object-fit: cover;
}
.slide-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 5px;
color: #fff;
}
.slide-caption h2 {
margin-top: 0;
font-size: 36px;
}
.slide-caption p {
margin-bottom: 0;
font-size: 18px;
}
```
jQuery代码:
```
$(document).ready(function() {
var slideCount = $('#slider .slide').length;
var slideWidth = $('#slider .slide').width();
var slideHeight = $('#slider .slide').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider .slide:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: +slideWidth
}, 200, function() {
$('#slider .slide:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: -slideWidth
}, 200, function() {
$('#slider .slide:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function() {
moveLeft();
});
$('a.control_next').click(function() {
moveRight();
});
});
```
这段代码中,我们使用jQuery来实现轮播功能,其中`slideCount`表示轮播图的数量,`slideWidth`和`slideHeight`分别表示轮播图的宽度和高度,`sliderUlWidth`表示轮播图容器的总宽度。`moveLeft()`和`moveRight()`是移动轮播图的函数,分别用于左移和右移。在HTML中,我们为左右箭头添加了`control_prev`和`control_next`类,并使用jQuery监听它们的点击事件,来调用对应的移动函数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)