我是 JS 新手，我正在尝试使用 JS 更新 div、svg 的 CSS 类和链接。
我在 Django 应用程序中使用 TailwindCSS 制作了以下侧边栏。
<div class="w-full flex flex-col p-5 border-r border-gray-200">
<div class="flex py-2 flex-col mt-5">
<div class="flex flex-row space-x-2 p-4 items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/>
</svg>
<a href="{% url 'tool:testindex' %}"
class="font-medium text-sm text-gray-500" onclick="updateClass(this);">{% trans 'Dashboard' %}</a>
</div>
<div class="flex flex-row space-x-2 p-4 items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25M9 16.5v.75m3-3v3M15 12v5.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
</svg>
<a href="{% url 'tool:reports' %}"
class="text-gray-500 font-medium text-sm" onclick="updateClass(this);">{% trans 'Invoice control' %}</a>
</div>
<div class="flex flex-row space-x-2 p-4 bg-[#68BA9E] rounded-xl items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/>
</svg>
<a href="{% url 'tool:sla-compliance' %}"
class="text-white font-medium text-sm" onclick="updateClass(this);">{% trans 'SLA Compliance' %}</a>
</div>
<div class="flex flex-row space-x-2 p-4 items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"/>
</svg>
<a href="{% url 'tool:co2-emissions' %}"
class="font-medium text-sm text-gray-500" onclick="updateClass(this);">{% trans 'CO2 Emissions' %}</a>
</div>
<div class="flex flex-row space-x-2 p-4 items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round"
d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/>
</svg>
<a href="#" class="font-medium text-sm text-gray-500" onclick="updateClass(this);">{% trans 'Claims' %}</a>
</div>
{% if request.user.is_superuser %}
<div class="flex flex-row space-x-2 p-4 items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/>
</svg>
<a href="{% url 'admin:index' %}"
class="text-gray-500 font-medium text-sm" onclick="updateClass(this);">{% trans 'Administration' %}</a>
{% endif %}
</div>
</div>
</div>
当我单击 div 内的链接时，我尝试更新 CSS 类。对于每个链接，onclick 方法都链接到以下 JS 函数 updateClass:
<script>
function updateClass(el) {
let elem = $(el);
elem.removeClass('text-gray-500');
elem.addClass("text-white");
let svgParent = elem.find('svg');
svgParent.removeClass('text-gray-500');
svgParent.addClass("text-white");
let divParent = elem.closest('div');
divParent.addClass("bg-[#68BA9E] rounded-xl");
}
</script>
这有效(除了 svg 部分，我不知道为什么)。但是页面重新加载后，css类就消失了。重新加载页面后如何保留更改？ 我知道我需要改变我的功能，但我不明白为什么我不能保留新的 CSS 类。
最佳答案
据我了解，您的用户会单击，但您希望在重新加载和页面更改时保留单击状态，我是对的吗？
如果是这样，我还假设您有多个应该执行此操作的元素？
这就是我要做的:
// Have an object to store the state
let clickedState = {};
// Recover the state at the start of the page
if(localStorage.hasItem('clickedState')) {
try {
clickedState = JSON.parse(localStorage.getItem('clickedState'))
} catch (e) {
// if parsing of json fail we remove the item
localStorage.removeItem('clickedState')
}
}
function updateClass(el) {
// your function
}
// the event listener
function onElClick(event) {
let el = event.target;
// toggle behaviour
clickedState[el.id] = clickedState.hasOwnProperty(el.id) ? !clickedState[el.id] : true
// OR //
// normal behaviour
clickedState[el.id] = true;
localStorage.setItem('clickedState', JSON.stringify(clickedState))
updateClass(el)
}
// here we redo updateClick for all clicked elements on page load
Object.keys(clickedState).forEach(k => {
if(clickedState[k]) {
let el = document.getElementById(k);
if(el) {
updateClass(el)
}
}
})
根据您的需要，您可能希望通过切换行为来实现相反的操作
关于javascript - 页面加载后使用 javascript 更新 TailwindCSS 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74112308/