php - 用 javascript 更改 z-index

Question

我正在用 php 做一个网站

我把左边的菜单做成这样

这些菜单来自数据库中的一个字符串。我正在用 echo 打印它。我使用图像作为每个菜单的背景。

现在我想要这样

我有一个箭头图像。

我知道我可以用 z-index 做到这一点。但我不能只用 css 来做。所以我需要帮助来使用 javascript 来完成它。我想使用 javascript 或 jquery 更改 html

Answer 1

对于全 CSS 解决方案，请尝试像这样构建您的菜单...

<style type="text/css">
  .menu li {
    background:url(path/to/gradient.png) top left repeat-x;
  }
  .menu li a {
    display:block;
    padding:2px 5px;
    backround:url(path/to/arrow.png) bottom right no-repeat;
  }
</style>


<ul class="menu">
  <li><a href="fanclub.php">Fan Club</a></li>
  <li><a href="blog.php">Blog</a></li>
  <li><a href="poll.php">Poll</a></li>
</ul>

如果您必须使用 JavaScript 来解决问题(我建议您避免这样做)，您可以像这样访问任何元素(支持它的元素)的 z-index 属性:

// DOM Scripting Example (Single Element)
myElement.style.zIndex = 1000;

// jQuery Example (All elements with the "arrow" class)
$('.arrow').css('z-index', 1000);