<div>元素是HTML中最常用的標簽之一，它可以用來創建一個網頁上的獨立區塊。而<ul>是用來創建一個無序列表的標簽。在HTML中，我們可以通過一些簡單而強大的代碼來實現點擊效果，讓用戶能夠交互地操作我們的網頁。

那么，如何通過點擊來改變<div>元素或<ul>元素呢？我們可以借助JavaScript來實現這一功能。下面是一個簡單的JavaScript代碼示例：

<script>
function changeColor() {
var divElement = document.getElementById("myDiv");
divElement.style.backgroundColor = "red";
}
</script>

在上面的代碼中，我們創建了一個函數changeColor()，當被調用時，它會獲取id為myDiv的<div>元素，并將其背景顏色設置為紅色。為了使這個函數生效，我們需要在需要觸發點擊事件的元素上添加相應的代碼，比如下面的代碼：

<div id="myDiv" onclick="changeColor()">這是一個可以點擊的區塊</div>

這段代碼中，我們給<div>標簽添加了一個id屬性，并在內部添加了一個觸發點擊事件的動作。當用戶點擊這個區塊時，changeColor()函數將會被觸發，從而改變<div>元素的背景顏色。

除了改變背景顏色，我們還可以通過點擊來改變列表元素的樣式。下面是一個示例代碼：

<style>
.selected {
background-color: yellow;
font-weight: bold;
}
</style>
<br>
<script>
function selectItem(item) {
item.classList.toggle("selected");
}
</script>
<br>
<ul>
<li onclick="selectItem(this)">選項1</li>
<li onclick="selectItem(this)">選項2</li>
<li onclick="selectItem(this)">選項3</li>
</ul>

在上述代碼中，我們定義了一個CSS樣式塊，其中.selected類定義了選中的元素的樣式，比如背景顏色改為黃色，字體加粗。然后，我們創建了一個JavaScript函數selectItem()，當點擊<li>元素時，該函數會被觸發。

函數selectItem()接收一個參數item，表示被點擊的元素。在函數內部，我們使用classList.toggle()方法來切換元素的類名，實現選中和取消選中的效果。當用戶點擊<li>元素時，它的類名將會被切換為selected，從而改變<li>元素的樣式。

總之，通過點擊事件和JavaScript的配合，我們可以實現<div>元素或<ul>元素的點擊效果，讓用戶能夠進行交互操作，提升網頁的用戶體驗。