单击时更改链接href和文本

时间：2017-05-18 12:43:29

标签： javascript jquery html css

所以我有三个按钮，每个按钮在点击时都会显示自己的内容。但我想要发生的是活动链接文本更改为关于我们和href也改变。我的问题是我可以改变文本，但是当我点击另一个链接时它不会改变，我也不知道如何实现这一点。另一个问题是，一旦我点击它第一次href改变，我需要它更改时，第二次不是第一次点击它。希望所有这些都有意义。

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

＆＃13;
＆＃13; 
$(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');
          }
    });
});
＆＃13; 
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;
}
＆＃13; 
   <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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：2)

您可以尝试以下方法 - 我已经评论过js来展示我在做什么。只有链接的其他更改 - 使用目标ID作为href并将隐藏类添加到您不希望默认显示的页面容器

$(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>

答案 1 :(得分：0)

将prev文本保存在数据属性中的链接中。然后单击“重置所有div”  使用初始文本，然后将新文本设置为目标div

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

附带示例演示

＆＃13;
＆＃13; 
$(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")
         
    });
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

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

例如：

＆＃13;
＆＃13; 
$(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');
        }
    });
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

尝试Code：Jquery Changed 

     $(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>
相关问题
最新问题