Question

我已经通过电子邮件发送了从themeforest购买的模板的zip文件，他们已经要求我修改它。有一个水平导航栏，其上有许多链接到页面上的不同部分（它是一个单页网站），而在unmodified template中，有效的导航链接（无论是主页，团队，服务或联系人）具有不同的背景颜色，具体取决于您单击的是哪一种。当我使用my modified page时，＆＃34;有效的导航链接＆＃34;样式似乎不起作用。

我无法弄清楚它出了什么问题。可能是因为我不熟悉链接到页面的各种脚本或bootstrap css。

我已尝试将.active类的名称更改为.viewing，以防它发生伪/命名冲突，并且它没有任何区别。

导航栏来源如下：

<div class="span9 nav-wrapper">
                        <nav>
                            <ul>
                                <li><a href="#section-home" id="nav-home" class="active">Home</a></li>
                                <li><a href="#our-team" id="nav-team">Team</a></li>
                                <li><a href="#our-services" id="nav-services">Services</a></li>
                                <li><a href="#contact-section" id="nav-contact">Contact</a></li>
                            </ul>
                        </nav>
                        <div class="header-phone-number"><span>Call us on</span> <i class="icon-phone"></i> 1800 25 1800</div>
                    </div>

以及适用于其链接的CSS是：

nav a {
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    padding: 26px 20px;
    font-size: 12px;
    font-family: 'Open Sans',sans-serif;
}

nav a:hover {
    background: #616a73;
}

nav a:hover, 
nav a:visited {
    color: #fff;
    text-decoration: none;
    outline: none;
}

nav a.active {
    background: #4c5660 url(../img/banner-bg.jpg);
    color: #fff;
    outline: none;
}

有人能指出我正确的方向＆＃34; .active＆＃34; class适用于此特定导航栏以及单击时如何将其应用于其他导航链接？这是一件好事吗？为什么我的修改过的页面被打破了＃34;什么时候我认为我从这个导航栏的模板改变了颜色？

提前致谢。

Answer 1

我不确定在不使用javascript或php的情况下添加类。如果你愿意使用其中任何一个，那么我就能提出这个问题：

<强>的jQuery

$("a").click(function() {
    $("nav").find("a.current").removeClass("current");
    $(this).addClass("current");
});

PHP （未经测试）

<?php
    $nav = "<nav><ul><li>";
    $links = array(
        '#home' => 'Home',
        '#serv' => 'Service',
        '#con' => 'Contact',
        '#about' => 'About'
    );

    if(isset($_GET['link'])) // link = integer
    {
        $i = 1;
        foreach($links as $key => $val)
        {
            if($_GET['link'] == $i)
            {
                $nav .= "<a class =\"current\" href=\"".$key."\">".$val."</a>";
            }
            else
            {
                $nav .= "<a href=\"".$key."\">".$val."</a>";
            }
            ++$i;
        }
    }

    echo $nav; // Somewhere
?>

jsfiddle

Answer 2

JQuery出了问题。

如果以下位运行，则活动类完全可以正常工作：

$('nav a').click(function(){
      $('nav a').removeClass('active');
      $(this).addClass('active');
      var href= $(this).attr('href');

      if ( guardianIsMobile === true ){
          $('.nav-wrapper').hide();
      }

      $.scrollTo( href, 800, {
          onAfter : function(){
              //add function to do after the animation here if required
          } ,
          offset: -30 //use this to position the window exactly where you want
      });

      return false;
   });

如果您查看网站上的控制台，则会出现以下错误：

Uncaught TypeError: Cannot read property 'offsetWidth' of null

此错误引用custom.js第148行，即：

var map = new google.maps.Map(document.getElementById("contact-map"),myMapOptions);

也许地图上有什么东西让你搞砸了？

css样式.active链接不适用于使用部分的单个页面

2 个答案: