Question

我正在尝试使用下面的代码段向我的导航栏添加位置指示器（即，选择列表项时应出现边框）。我目前将其余的css代码嵌入使用scss格式导航{li {/ * code here * /} a {/ code here /}}等等。当我添加此活动标记时，没有任何反应。我应该使用有效标记进行不同格式化吗？有更简单的方法吗？为什么选择活动标签？谢谢！

HTML

#include <comutil.h>    // _variant_t
#include <mshtml.h>     // IHTMLDocument and IHTMLElement
#include <exdisp.h>     // IWebBrowser2
#include <atlbase.h>    // CComPtr
#include <string>
#include <iostream>
#include <vector>


#pragma comment(lib, "comsuppw.lib")



HRESULT LoadWebpage(
const CComBSTR& webpageURL,
CComPtr<IWebBrowser2>& browser,
CComPtr<IHTMLDocument2>& document)
{
HRESULT hr;
VARIANT empty;

VariantInit(&empty);

// Navigate to the specifed webpage
hr = browser->Navigate(webpageURL, &empty, &empty, &empty, &empty);

//  Wait for the load.
if (SUCCEEDED(hr))
{
    READYSTATE state;

    while (SUCCEEDED(hr = browser->get_ReadyState(&state)))
    {
        if (state == READYSTATE_COMPLETE) break;
    }
}

// The browser now has a document object. Grab it.
if (SUCCEEDED(hr))
{
    CComPtr<IDispatch> dispatch;

    hr = browser->get_Document(&dispatch);
    if (SUCCEEDED(hr) && dispatch != NULL)
    {
        hr = dispatch.QueryInterface<IHTMLDocument2>(&document);
    }
    else
    {
        hr = E_FAIL;
    }
}

return hr;
  }


 void CrawlWebsite(const CComBSTR& webpage, std::vector<std::wstring>& urlList)
 {
    HRESULT hr;

// Create a browser object
CComPtr<IWebBrowser2> browser;
hr = CoCreateInstance(
    CLSID_InternetExplorer,
    NULL,
    CLSCTX_SERVER,
    IID_IWebBrowser2,
    reinterpret_cast<void**>(&browser));

// Grab a web page
CComPtr<IHTMLDocument2> document;
if (SUCCEEDED(hr))
{
    // Make sure these two items are scoped so CoUninitialize doesn't gump
    // us up.
    hr = LoadWebpage(webpage, browser, document);
}

// Grab all the anchors!
if (SUCCEEDED(hr))
{
    CComPtr<IHTMLElementCollection> urls;
    long count = 0;

    hr = document->get_all(&urls);

    if (SUCCEEDED(hr))
    {
        hr = urls->get_length(&count);
    }

    if (SUCCEEDED(hr))
    {
        for (long i = 0; i < count; i++)
        {
            CComPtr<IDispatch>  element;
            CComPtr<IHTMLAnchorElement> anchor;

            // Get an IDispatch interface for the next option.
            _variant_t index = i;
            hr = urls->item(index, index, &element);
            if (SUCCEEDED(hr))
            {
                hr = element->QueryInterface(
                    IID_IHTMLAnchorElement,
                    reinterpret_cast<void **>(&anchor));
            }

            if (SUCCEEDED(hr) && anchor != NULL)
            {
                CComBSTR    url;
                hr = anchor->get_href(&url);
                if (SUCCEEDED(hr) && url != NULL)
                {
                    urlList.push_back(std::wstring(url));
                }
            }
        }
    }
}
 }

     int main()
 {
HRESULT hr;

hr = CoInitialize(NULL);
std::vector<std::wstring>   urls;

CComBSTR webpage(L"http://www.google.com/");


CrawlWebsite(webpage, urls);
for (std::vector<std::wstring>::iterator it = urls.begin();
it != urls.end();
    ++it)
{
    std::wcout << "URL: " << *it << std::endl;


}
getchar();
CoUninitialize();

return 0;

CSS

<nav class="navbar navbar-main"> 
    <ul class="top-menu">
    <li id="home"><a href="#">HOME</a></li>
    <li id="about"><a href="#about">ABOUT</a></li>
    <li id="info"><a href="#media">MEDIA</a></li>
    <li id="social"><a href="#social">SOCIAL</a></li>
    </ul>
  </nav>

JS

#nav ul li .active {
border-bottom:3px #FFF solid;
}

Answer 1

下面的代码会找到其<a>属性包含当前路径名的所有href代码。

$(function () {
        $("a[href*='" + location.pathname + "']").addClass("active");
})

Answer 2

首先，css没有正确定位元素。你的css正在寻找一个导航id的元素，而这个元素并不存在。

nav元素有两个类（navbar和navbar-main），因此您可以使用其中一个开始选择。由于jquery正在向匹配的链接添加active类，因此css规则需要包含a。要真正查看边框，您还需要设置display属性。经常使用的是block例如：

.navbar ul li a.active {
  display:block;
  border-bottom:3px #FFF solid;
}

在下面提供的示例中，我更新了jquery以定位特定链接，仅用于说明目的。

$(document).ready(function() {
  var pgurl = "#about"; //Using a static value for illustration purposes.
  $(".navbar ul li a").each(function(){
    if($(this).attr("href") == pgurl || $(this).attr("href") == '' ) {
      console.log($(this).attr("href"));
      $(this).addClass("active");
    }
  });
});

Fiddle example

Answer 3

这将为您工作。这就是我的方式。

$(document).ready(function () {
      $(".top-menu > li > a[href*='" + location.pathname + "']").addClass('active'); //the .top-menu is your ul class
});(jQuery);

将活动类添加到nav中的ul列表

3 个答案: