Question

我确信这很简单，但我似乎无法让它发挥作用。

我想在点击链接后替换锚链接。替换的链接将来自data-href值。

这是HTML

<header class="site-header">
    <nav class="nav-primary">
        <ul>
            <li><a href="#services" class="home-nav" data-href="/services">Services</a></li>
            <li><a href="#about" class="home-nav" data-href="/about">About</a></li>
            <li><a href="#portfolio" class="home-nav" data-href="/portfolio">Portfolio</a></li>
            <li><a href="#blog" class="home-nav" data-href="/blog">Blog</a></li>
        </ul>
    </nav>
</header>
<div class="site-inner">
    <div class="content-site-wrap">
        <section id="services">Lorem ipsum dolor sit amet</section>
        <section id="about">Lorem ipsum dolor sit amet</section>
        <section id="portfolio">Lorem ipsum dolor sit amet</section>
        <section id="blog">Lorem ipsum dolor sit amet</section>
    </div>
</div>

我对JS的尝试：

$(document).on('click', '.nav-primary a', function(){
   $('a.home-nav').attr('href', data('href'));
});

不确定是否重要，但我在此页面上使用jquery的平滑滚动，因此当点击导航链接时，它将滚动到页面上的锚点。如果单击了相同的链接，则会转到data-href定义的链接。

简单地说，我只需在点击后替换链接的#即可。也许一个简单的replace函数可能会起作用。

Answer 1

使用$(this).data('href')代替data('href')

$(document).on('click', '.nav-primary a', function(){
   $('a.home-nav').attr('href', $(this).data('href'));
});

Answer 2

try this

$(document).on('click', '.nav-primary a', function(){
 console.log($(this).attr('data-href'))
 $(this).attr('href', $(this).attr('data-href'));
});

样本 http://jsfiddle.net/CkaLx/

单击后用链接替换锚文本

2 个答案: