jQuery选择.asideNav 下面的display为show的ul下面的li
时间: 2024-02-16 10:04:34 浏览: 36
可以使用以下的 jQuery 选择器来选取满足条件的元素:
```
$('.asideNav ul:visible li')
```
解释一下这个选择器:
- `$('.asideNav ul:visible')` 选取所有 class 为 `asideNav` 的元素下面 `display` 属性值为 `show` 的 `ul` 元素。
- `.find('li')` 选取这些 `ul` 元素下面的所有 `li` 元素。
为了让选择器更加精确,可以使用 `>` 而不是 `find()`,这样就只会选中直接子元素 `li`:
```
$('.asideNav > ul:visible > li')
```
相关问题
jquery-ul-li实现分页功能 转载仅供交流
好的,下面是使用 jQuery 实现 ul-li 分页功能的代码示例:
HTML 代码:
```html
<div id="pagination">
<ul>
<li class="prev"><a href="#">Prev</a></li>
<li class="page"><a href="#">1</a></li>
<li class="page"><a href="#">2</a></li>
<li class="page"><a href="#">3</a></li>
<li class="page"><a href="#">4</a></li>
<li class="page"><a href="#">5</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
```
CSS 代码:
```css
#pagination {
text-align: center;
}
#pagination ul {
display: inline-block;
margin: 0;
padding: 0;
}
#pagination li {
display: inline-block;
margin: 0;
padding: 0;
}
#pagination li a {
display: inline-block;
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #ccc;
text-decoration: none;
color: #333;
}
#pagination li.active a {
background-color: #333;
color: #fff;
}
```
JavaScript 代码:
```javascript
$(document).ready(function() {
var pageSize = 10; // 每页显示的记录数
var pageCount = 5; // 分页栏显示的页码数
var $pagination = $('#pagination ul');
var $prev = $pagination.find('.prev');
var $next = $pagination.find('.next');
var $pages = $pagination.find('.page');
// 计算总页数
var totalRecords = 100; // 总记录数
var totalPages = Math.ceil(totalRecords / pageSize);
// 初始化分页栏
function initPagination() {
$pages.hide();
$pages.filter(':lt(' + pageCount + ')').show();
$pagination.find('.active').removeClass('active');
$pages.eq(0).addClass('active');
$prev.addClass('disabled');
$next.toggleClass('disabled', totalPages <= pageCount);
}
// 显示指定页码的记录
function showPage(page) {
var start = (page - 1) * pageSize;
var end = start + pageSize;
// 显示分页数据
// ...
}
// 点击分页栏页码
$pages.click(function() {
var $this = $(this);
if (!$this.hasClass('active')) {
var page = $this.text();
showPage(page);
$pagination.find('.active').removeClass('active');
$this.addClass('active');
$prev.toggleClass('disabled', page == 1);
$next.toggleClass('disabled', page == totalPages);
if (page > pageCount && page < totalPages) {
$pages.hide();
$pages.filter(':lt(' + (pageCount - 2) + ')').show();
$pages.filter(':eq(0),:eq(-1)').show();
}
else if (page >= totalPages - pageCount + 2) {
$pages.hide();
$pages.filter(':gt(' + (totalPages - pageCount - 1) + ')').show();
$pages.filter(':eq(0),:eq(-1)').show();
}
}
});
// 点击上一页
$prev.click(function() {
var $this = $(this);
if (!$this.hasClass('disabled')) {
var page = $pagination.find('.active').text();
showPage(page - 1);
$pagination.find('.active').removeClass('active').prev().addClass('active');
$prev.toggleClass('disabled', page == 2);
$next.toggleClass('disabled', false);
if (page > pageCount && page <= totalPages) {
$pages.hide();
$pages.filter(':lt(' + (pageCount - 2) + ')').show();
$pages.filter(':eq(0),:eq(-1)').show();
}
}
});
// 点击下一页
$next.click(function() {
var $this = $(this);
if (!$this.hasClass('disabled')) {
var page = $pagination.find('.active').text();
showPage(parseInt(page) + 1);
$pagination.find('.active').removeClass('active').next().addClass('active');
$prev.toggleClass('disabled', false);
$next.toggleClass('disabled', page == totalPages - 1);
if (page >= 1 && page < totalPages - pageCount + 1) {
$pages.hide();
$pages.filter(':gt(' + (page - 2) + '):lt(' + (pageCount - 2) + ')').show();
$pages.filter(':eq(0),:eq(-1)').show();
}
}
});
// 初始化分页栏和显示第一页数据
initPagination();
showPage(1);
});
```
这段代码实现了一个简单的分页功能,其中 `totalRecords` 变量表示总记录数,`pageSize` 变量表示每页显示的记录数,`pageCount` 变量表示分页栏显示的页码数,可以根据实际情况进行调整。在 `showPage` 函数中可以实现分页数据的显示逻辑,具体实现可以根据实际情况进行编写。
jquery垂直滑动选项卡.
以下是一个基于jQuery的垂直滑动选项卡的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>垂直滑动选项卡</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
.tab {
width: 200px;
height: 300px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}
.tab ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tab ul li {
height: 50px;
line-height: 50px;
padding-left: 20px;
background-color: #f5f5f5;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.tab ul li.active {
background-color: #fff;
font-weight: bold;
}
.tab .content {
position: absolute;
top: 0;
left: 200px;
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
}
</style>
<script type="text/javascript">
$(function() {
$('.tab ul li').click(function() {
var index = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('.tab .content').eq(index).show().siblings('.content').hide();
});
});
</script>
</head>
<body>
<div class="tab">
<ul>
<li class="active">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
<li>选项卡4</li>
<li>选项卡5</li>
</ul>
<div class="content">
<div>内容1</div>
<div style="display: none;">内容2</div>
<div style="display: none;">内容3</div>
<div style="display: none;">内容4</div>
<div style="display: none;">内容5</div>
</div>
</div>
</body>
</html>
```
该示例代码实现了一个垂直滑动选项卡,当鼠标点击选项卡标签时,对应的内容会显示出来。你可以根据自己的需求修改样式和内容。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
请优化这段代码:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <style type="text/css"> .nav { margin: 100px; } .nav>li { position: relative; float: left; width: 80px; height: 41px; text-align: center; } .nav li a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; } /* .nav>li ul{ display: none; position: absolute; top: 20px; right: 21px; } */ </style> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> 微博 私信 评论 @我 留言板 私信 评论 @我 电话 私信 评论 @我 邮箱 私信 评论 @我 <script type="text/javascript"> $(".nav>li").mouseover( function() { $(this).children("ul").show(); } ); $(".nav>li").mouseout( function() { $(this).children("ul").hide(); } ); </script> </body> </html>
![](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)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>美丽GO</title> 美丽GO <style> .h1{ justify-content: center; } .wrapper { display: flex; justify-content: center; } #left { display: flex; list-style: none; margin: 0; padding: 0; } #left li { display: inline-block; margin-right: 10px; } #content { display: flex; flex-wrap: wrap; justify-content: center; } #content div { flex: 1; margin: 10px; } img { max-width: 100%; } </style> <script src="jquery.min.js"></script> <script> $(function() { // 1. 鼠标经过左侧的小li $("#left li").mouseover(function() { // 2. 得到当前小li 的索引号 var index = $(this).index(); console.log(index); // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了 // $("#content div").eq(index).show(); // 4. 让其余的图片(就是其他的兄弟)隐藏起来 // $("#content div").eq(index).siblings().hide(); // 链式编程; $("#content div").eq(index).show().siblings().hide(); }) }) </script> </head> <body> 女靴 雪地靴 冬裙 呢大衣 毛衣 棉服 女裤 羽绒服 牛仔裤 男包
</body> </html>如何将其代码改成表格形式
![](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)