1

我目前正在向测试站点添加导航栏。<a>我已经看到一些导航栏通过在标签下方添加一个栏或发光来指示当前选定的页面。我现在很困惑以正确的方式实现这种 css 风格。如何在选定对象周围实现发光效果，<a>以便用户现在可以访问他们当前所在的页面？ 例子

谢谢

对于我的<a>标签，我创建了一个.buttonNav类

导航栏的CSS相关规则：

<style>
/**************  Header Styling ****************/
#navigation {
    left: 440px;
    margin-top: 80px;
    position: relative;
}


#contentNav { color: #cfdae3; }
/* Dark Button CSS */
.buttonNav {
    outline: 0;
    padding: 5px 12px;
    display: block;
    color: #EBEBEB;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border: 1px solid #1c252b;
    border-radius: 3px;
    background: #232B30;
}
.buttonNav:hover {
    color: #fff;
    background: #4C5A64; 
}
.buttonNav:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    color: #fff;
    padding: 6px 12px 4px;
    background: #20282D; 
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
.button-list {
    list-style: none outside none;
    overflow: hidden;
}
.button-list li { float: left; margin: 0 5px 0 0; }
.button-list li.search { padding-left: 18px; margin-left: 10px; position: relative; list-style: none outside none;}

</style>

HTML

<div id="header">
  <div class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></div>
  <div id="navigation">

   <ul class="button-list">
       <h2>MAIN TITLE PAGE</h2>
    <li><a href="http://webprolearner2346.zxq.net/css-test2/index.php" class="buttonNav" >Content 1</a></li>
    <li><a href="http://webprolearner2346.zxq.net/css-test2/content2.php" class="buttonNav" >Content 2</a></li> 
   </ul> 
  </div>
 </div>
4

3 回答 3

1

我会放入一些 jquery 来自动处理这个问题，比如

  $(document).ready(function () {
      var str = location.href.toLowerCase();
      $(".navigation li a").each(function () {
          if (str.indexOf(this.href.toLowerCase()) > -1) {
              $("li.highlight").removeClass("highlight");
              $(this).parent().addClass("highlight");
          }
      });
  })

此函数将向highlight活动li a元素添加一个 css 类。如果且仅当 下一页的名称与文本相同时。因此，如果链接名为“Product.html”，您将希望a元素的文本为“Product”

HTML的一个例子

<ul class="navigation">
    <li class="highlight"><a href="index.html">Home</a></li>
    <li><a href="product.html">Product</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

CSS会稍微改变背景颜色。

.highlight{
    background-color: #fff;
}

你知道或放入你想要的发光效果

希望这可以帮助，

编辑：工作教程/演示http://blog.huidesign.com/automatically-highlight-current-page-in-navigation-with-css-jquery/

EDIT2：感谢 Sven Bieder 帮助更好地理解。

于 2012-08-09T18:59:48.900 回答
1

如果你添加一个类

.currentPage {
  background: #yourDifferentColor;
  (box-shadow)..
  (text-decoration)..
}

并将其添加到代表当前页面的链接中（您必须在所有页面上执行此操作），您可以将当前页面链接的样式定义为不同于其他链接的样式，以符合您的规范。

于 2012-08-09T18:55:23.877 回答
0

好吧，您通常会在服务器级别处理此问题。现在这很容易。如果您在索引页面上，只需在导航中转到指向索引页面的链接，然后向其添加类或内联样式。

于 2012-08-09T18:55:50.960 回答