时间戳

首页 > 解决方案 > 阅读较少后更改按钮/按钮上的文本

html - 阅读较少后更改按钮/按钮上的文本

问题描述

阅读更多/阅读更少我在我的 HTML Bootstrap 页面上实现的 jQuery，但作为一个快乐的业余爱好者，我想在阅读更多内容之后将我的蓝色文本“阅读更多”更改为黑色。该页面有许多阅读更多部分。

// This function will handle hidden and read more events
$(document).on("click", ".toggle-text-button", function() {
  if ($(this).text() == "Read More") {
    var thisNow = document.getElementById('toggle-text-button')
    console.log("this is now =", thisNow);
    $(this).text("Read Less");
    // Use a jquery selector using the `.attr()` of the link
    $("#toggle-text-" + $(this).attr("toggle-text")).slideDown();
  } else {
    $(this).text("Read More");
    //   $(this).addClass("r-Less");
    // Use a jquery selector using the `.attr()` of the link
    console.log("SLIDE UP -- this is now =", $(this).attr("toggle-text"));
    var BackToo = ("#" + "toggle-text-" + $(this).attr("toggle-text") + "b");
    var BackCol = ("#" + "toggle-text-" + $(this).attr("toggle-text"));
    // offset = $(BackToo).offset().top - document.getElementById(BackToo).clientHeight;
    console.log("JUMP BACK =", BackToo)
    // $(".r-More").css("color", "black!important");
    //  $(this).css("color" , "black!important");
    $("#toggle-text-" + $(this).attr("toggle-text")).slideUp();
    // $(this).addClass("r-Less");
    //document.getElementById(BackToo).scrollIntoView();
    //  $(BackToo)[0].scrollIntoView();
    //   $('html,body').unbind().animate({scrollTop: $(element).offset().top-50},'slow');
    $("html, body").delay(1000).animate({
      scrollTop: $(BackToo).offset().top - 150
    }, 1000);
    // $(this).attr("toggle-text").css("color","blacl!important");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<a class="toggle-text-button item-link r-More" toggle-text="10">Read More<i class="fa fa-arrow-right"></i></a>

标签： htmljquery

解决方案

无需编写脚本

您可以提供a一个 href 并使用 :visited css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<link rel="stylesheet" href="https://www.inspirothemes.com/polo/css/style.css" />

<style>
a.r-More:visited { color: black; }
</style>

<a href="#" class="toggle-text-button item-link r-More" toggle-text="10">Read More<i class="fa fa-arrow-right"></i></a>

推荐阅读