更改链接href和点击文字

Question

因此，我有三个按钮，每个按钮在单击时都会显示各自的内容。 但是我想发生的是活动链接文本更改为关于我们，而href也更改。 我的问题是我可以更改文本，但是当我单击另一个链接时它不会变回来，而且我不知道该如何实现。 另一个问题是，当我第一次单击它时，href就会更改，并且我需要在第二次单击时（而不是第一次）更改它。 希望所有这些都有意义。

https://codepen.io/Reece_Dev/pen/gWdEoJ

 $(document).ready(function() { $('.link').on('click', function() { $('.pageContainer').addClass('hide'); $('#'+ $(this).data('target')).removeClass('hide'); if($(this).on('click')){ $(this).attr("href", "https://www.google.com"); $(this).text('about'); } }); }); 

 nav{ width: 100%; text-align: center; } nav ul{ list-style-type: none; } nav ul li{ display: inline-block; } nav ul li a{ font-size: 40px; margin: 0 10px; } p{ font-size: 30px; font-weight: bold; } div{ width: 100%; text-align: center; } .hide{ display: none; } 

  <nav> <ul> <li><a id="link_one" class="link" data-target="accreditations" href="#">link 1</a></li> <li><a id="link_two" href="#" class="link" data-target="our_prods">link 2</a></li> <li><a id="link_three" href="#" class="link" data-target="why_us">link 3</a></li> </ul> </nav> <div class="pageContainer" id="about_us"> <p>About Us Page - to be displayed by default</p> </div> <div class="pageContainer" id="accreditations"> <p>Accreditations Page Content - Link 1</p> </div> <div class="pageContainer" id="our_prods"> <p>Our products - Link 2</p> </div> <div class="pageContainer" id="why_us"> <p>Why us content - link 3</p> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

Answer 1

您可以尝试以下操作-我已对js进行了注释，以显示我在做什么。 链接只有其他更改-使用目标ID作为href并将hide类添加到默认情况下不希望显示的页面容器中

 $(document).ready(function() { var links = $('.link'), containers = $('.pageContainer'); // cache these for better performance links.on('click', function(e) { // pass event into function var link = $(this); e.preventDefault(); // add this to stop the default action of the link containers.addClass('hide'); $(link.attr('href')).removeClass('hide'); // use the href so it is more accessible - ie link will work without js if (link.attr('href').substr(1) === link.data('target')) { // only do this if original href links.not(link).text(function() { return $(this).data('text'); // reset text }).attr('href', function() { return '#' + $(this).data('target'); // reset href }); link.attr("href", "#about_us").text('about'); // not sure how you want to set the text and link for this // maybe use more data attributes so it can be different per link } else { // reset link if it was about that was clicked link.text(link.data('text')).attr('href', '#' + link.data('target')); // reset href and text } }); }); 

 nav { width: 100%; text-align: center; } nav ul { list-style-type: none; } nav ul li { display: inline-block; } nav ul li a { font-size: 40px; margin: 0 10px; } p { font-size: 30px; font-weight: bold; } div { width: 100%; text-align: center; } .hide { display: none; } 

 <nav> <ul> <li><a id="link_one" href="#accreditations" class="link" data-target="accreditations" data-text="link 1">link 1</a></li> <li><a id="link_two" href="#our_prods" class="link" data-target="our_prods" data-text="link 2">link 2</a></li> <li><a id="link_three" href="#why_us" class="link" data-target="why_us" data-text="link 3">link 3</a></li> </ul> </nav> <div class="pageContainer" id="about_us"> <p>About Us Page - to be displayed by default</p> </div> <div class="pageContainer hide" id="accreditations"> <p>Accreditations Page Content - Link 1</p> </div> <div class="pageContainer hide" id="our_prods"> <p>Our products - Link 2</p> </div> <div class="pageContainer hide" id="why_us"> <p>Why us content - link 3</p> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

Answer 2

将上一个文本保存在data属性的链接中。然后单击以初始文本重置所有div，然后将新文本设置为目标div

对于第二次单击时的激活链接，第一次单击时将新类添加到div中。如果该类不存在，则更改href

随附的示例演示

 $(document).ready(function() { $('.link').on('click', function() { $('.link').each(function( ){ $(this).text($(this).data('inactive-text')); }) $('.pageContainer').addClass('hide'); $('#'+ $(this).data('target')).removeClass('hide'); $(this).text( $(this).data('active-text') ); if($(this).hasClass("clicked")){ $(this).attr("href", "https://www.google.com"); } $(this).addClass("clicked") }); }); 

 nav{ width: 100%; text-align: center; } nav ul{ list-style-type: none; } nav ul li{ display: inline-block; } nav ul li a{ font-size: 40px; margin: 0 10px; } p{ font-size: 30px; font-weight: bold; } div{ width: 100%; text-align: center; } .hide{ display: none; } 

 <nav> <ul> <li><a id="link_one" class="link" data-target="accreditations" href="#" data-inactive-text="link 1" data-active-text="about" >link 1</a></li> <li><a id="link_two" href="#" class="link" data-target="our_prods" data-inactive-text="link 2" data-active-text="about" >link 2</a></li> <li><a id="link_three" href="#" class="link" data-target="why_us"data-inactive-text="link 3" data-active-text="about" >link 3</a></li> </ul> </nav> <div class="pageContainer" id="about_us"> <p>About Us Page - to be displayed by default</p> </div> <div class="pageContainer" id="accreditations"> <p>Accreditations Page Content - Link 1</p> </div> <div class="pageContainer" id="our_prods"> <p>Our products - Link 2</p> </div> <div class="pageContainer" id="why_us"> <p>Why us content - link 3</p> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

Answer 3

您可以使用e.preventDefault()来防止<a/>标记的默认行为。 这样，它就不会重定向到链接。
但是您说过要在第二次单击时将其重定向，那么您需要某种计数器。 一种解决方案是在元素本身上保留data-attribute ，并在单击后更改它。

例如：

 $(document).ready(function() { $('.link').on('click', function(e) { if($(this).attr('data-times-clicked') == '0'){ e.preventDefault(); $(this).attr('data-times-clicked', 1); $('.pageContainer').addClass('hide'); $('#'+ $(this).data('target')).removeClass('hide'); $(this).attr("href", "https://www.google.com"); $(this).text('about'); } }); }); 

 nav{ width: 100%; text-align: center; } nav ul{ list-style-type: none; } nav ul li{ display: inline-block; } nav ul li a{ font-size: 40px; margin: 0 10px; } p{ font-size: 30px; font-weight: bold; } div{ width: 100%; text-align: center; } .hide{ display: none; } 

 <nav> <ul> <li><a id="link_one" data-times-clicked="0" class="link" data-target="accreditations" href="#">link 1</a></li> <li><a id="link_two" data-times-clicked="0" href="#" class="link" data-target="our_prods">link 2</a></li> <li><a id="link_three" data-times-clicked="0" href="#" class="link" data-target="why_us">link 3</a></li> </ul> </nav> <div class="pageContainer" id="about_us"> <p>About Us Page - to be displayed by default</p> </div> <div class="pageContainer" id="accreditations"> <p>Accreditations Page Content - Link 1</p> </div> <div class="pageContainer" id="our_prods"> <p>Our products - Link 2</p> </div> <div class="pageContainer" id="why_us"> <p>Why us content - link 3</p> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

Answer 4

尝试代码：jQuery已更改

     $(document).ready(function()
        {
            $('.link').on('click', function() {
               $('.link').each(function( ){
                    $(this).text($(this).data('inactive-text'));
               })
                $('.pageContainer').addClass('hide');
                $('#'+ $(this).data('target')).removeClass('hide');

                $(this).text( $(this).data('active-text') );

            });
        });

HTML更改代码：

    <!-- language: lang-html -->

        <nav>
              <ul>
                <li><a id="link_one" class="link" data-target="accreditations" href="#" data-inactive-text="link 1" data-active-text="about" >link 1</a></li>
                <li><a id="link_two" href="#" class="link" data-target="our_prods" data-inactive-text="link 2" data-active-text="about" >link 2</a></li>
                <li><a id="link_three" href="#" class="link" data-target="why_us"data-inactive-text="link 3"  data-active-text="about" >link 3</a></li>
              </ul>
            </nav>