所选链接的Sharepoint顶级导航img

Question

我正在尝试设置一个指向我的SharePoint页面顶部导航中所选链接的img。有人可以用CSS帮助我吗？

视觉识别下的三角形。

Answer 1

如果你想要这样的东西你可以通过纯粹的css来实现它（注意导航li.selected a：在样式定义之后）。

这是一个工作片段

＆＃13;

＆＃13;

* {
  background: #454545;
}
nav {
  width: 500px;
  height: 60px;
  margin: 0 auto;
}
nav ul {
  width: 100%;
}
nav li {
  display: inline-block;
  float: left;
  margin-top: 12px;
  position: relative;
}
nav li a {
  color: #fff;
  text-decoration: none;
  padding: 11px 20px;
  text-transform: uppercase;
}
nav li.selected a {
  color: red;
}
nav li.selected a:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-bottom: solid #fff 10px;
  bottom: -12px;
  content: " ";
  left: 50%;
  margin-left: -10px;
  position: absolute;
}

＆＃13;

<nav>
  <ul>
    <li><a href="/page1/">Experience</a>
    </li>
    <li class="selected"><a href="/page2/">Visual Identity</a>
    </li>
    <li><a href="/page3/">tone of voice</a>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;