本文介绍了一个使用JavaScript实现的商品管理菜单交互案例。该菜单包括添加商品、明细管理、销售情况、库存情况、推荐商品和热卖商品等功能项，并通过简单的鼠标悬停效果增强用户体验。点击主菜单项可以显示或隐藏子菜单。
<script language='javascript'>
function over(obj)
{
obj.style.color = '#ff6600';
obj.style.backgroundColor = '#f7f7f7';
}
function out(obj)
{
obj.style.color = '';
obj.style.backgroundColor = '';
}
function shift(id)
{
var obj = document.getElementById(id);
if (obj.style.display == 'none')
{
obj.style.display = 'inline';
}
else
{
obj.style.display = 'none';
}
}
</script>
<html>
<body>
<div class='category cursor' onmouseover='over(this)' onmouseout='out(this)' onclick="shift('product')">商品管理</div>
<ul id='product' style='display:none'>
<li>
<a href='productAdd.aspx'>添加商品</a></li>
<li>
<a href='productAlter.aspx'>明细管理</a></li>
<li>
<a href='productMarket.aspx'>销售情况</a></li>
<li>
<a href='productStock.aspx'>库存情况</a></li>
<li>
<a href='productVouch.aspx'>推荐商品</a></li>
<li>
<a href='productHot.aspx'>热卖商品</a></li>
</ul>
</div>
</body>
</html>
function over(obj)
{
obj.style.color = '#ff6600';
obj.style.backgroundColor = '#f7f7f7';
}
function out(obj)
{
obj.style.color = '';
obj.style.backgroundColor = '';
}
function shift(id)
{
var obj = document.getElementById(id);
if (obj.style.display == 'none')
{
obj.style.display = 'inline';
}
else
{
obj.style.display = 'none';
}
}
</script>
<html>
<body>
<div class='category cursor' onmouseover='over(this)' onmouseout='out(this)' onclick="shift('product')">商品管理</div>
<ul id='product' style='display:none'>
<li>
<a href='productAdd.aspx'>添加商品</a></li>
<li>
<a href='productAlter.aspx'>明细管理</a></li>
<li>
<a href='productMarket.aspx'>销售情况</a></li>
<li>
<a href='productStock.aspx'>库存情况</a></li>
<li>
<a href='productVouch.aspx'>推荐商品</a></li>
<li>
<a href='productHot.aspx'>热卖商品</a></li>
</ul>
</div>
</body>
</html>
扫一扫
1032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
