用li标签做一个箭头,点击的时候能翻转
时间: 2024-05-10 10:19:50 浏览: 6
很简单,可以用CSS的transform属性来实现旋转翻转的效果。首先对li标签添加一个点击事件监听,然后在事件处理函数中给li标签添加一个class属性,通过这个class在CSS中设置rotate和scale等属性即可。以下是代码示例:
HTML:
```
<ul>
<li class="arrow">箭头</li>
</ul>
```
CSS:
```
.arrow {
width: 20px;
height: 20px;
border: 1px solid black;
text-align: center;
}
.arrow.active {
transform: rotate(180deg) scale(1, -1);
}
```
JavaScript:
```
document.querySelector('.arrow').addEventListener('click', function() {
this.classList.toggle('active');
});
```
这样点击箭头时就会旋转180度并沿Y轴翻转。
相关问题
jquery实现点击第一个li标签实现跳转页面
假设你的 HTML 代码如下:
```html
<ul>
<li><a href="page1.html">第一页</a></li>
<li><a href="page2.html">第二页</a></li>
<li><a href="page3.html">第三页</a></li>
</ul>
```
你可以使用如下的 jQuery 代码来实现点击第一个 li 标签中的链接跳转到相应页面:
```javascript
$(document).ready(function() {
$('li:first-child').click(function() {
window.location.href = $(this).find('a').attr('href');
});
});
```
这段代码会在页面加载完成后绑定一个 click 事件到第一个 li 标签上,当用户点击第一个 li 标签时会获取其中链接的 href 属性,并通过 `window.location.href` 跳转到相应页面。
puppeteer点击第五个li标签
可以使用如下代码来点击第五个 `li` 标签:
```
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
// 等待页面中的 li 标签加载完毕
await page.waitForSelector('li');
// 获取页面中所有的 li 标签
const lis = await page.$$('li');
// 获取第五个 li 标签
const fifthLi = lis[4];
// 点击第五个 li 标签
await fifthLi.click();
await browser.close();
})();
```
注意:上述代码假设页面中已经存在至少五个 `li` 标签,如果不存在,则会抛出异常。
相关推荐
![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)
![](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)