li點選增加active效果

2023-08-02 05:39:29

<!DOCTYPE html>

<html>

<head>

<title>頁籤實作原理</title>

.wrap{width: 300px;list-style: none;}

.wrap li{height: 50px;margin:1px;}

.active{font-weight:bold; background-color: pink; color:#fff;}

</style>

</head>

<body>

<li class="active">apple</li>

<li>banana</li>

</ul>

$(function(){

$(".wrap li").click(function() {

$(this).siblings('li').removeClass('active'); // 删除其兄弟元素的樣式

$(this).addClass('active'); // 為點選元素添加類名

});

</script>

</body>

</html>

轉載：https://blog.csdn.net/pink789/article/details/83049118

繼續閱讀