更改引导程序中活动列表项的背景颜色

Question

更改引导程序中活动列表项的背景颜色

Muh*_*aqi 12 html javascript css twitter-bootstrap

我有项目组列表

<div id="MainMenu">
    <div class="list-group panel">
        <a href="#why" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Menu 1</a>
        <div class="collapse" id="why">
            <a href="" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Menu 1 a</a>
            <a href="" class="list-group-item">Menu 1 b</a>
            <a href="" class="list-group-item">Menu 1 c</a>
            <a href="" class="list-group-item">Menu 1 d</a>
            <a href="" class="list-group-item">Menu 1 e</a>
            <a href="" class="list-group-item">Menu 1 f</a>
        </div>
        <a href="#joinus" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Menu 2</a>
        <div class="collapse" id="joinus">
            <a href="" class="list-group-item">Menu 2 a</a>
            <a href="" class="list-group-item">Menu 2 b</a>
            <a href="" class="list-group-item">Menu 2 c</a>
            <a href="" class="list-group-item">Menu 2 d</a>
            <a href="" class="list-group-item">Menu 2 e</a>
        </div>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

我想更改活动列表项的背景,我知道如何更改背景,但我无法获得哪个列表处于活动状态,或者无法通过JavaScript激活,尝试了很多其他人提供的解决方案,但没有找到解决方案.

的jsfiddle

更新:

Answer 1

Rob*_*ott 5

不知道为什么bootstrap没有这样做,但这里有一些jQuery在你的小提琴上.警报显示href活动的警报.

这就是你要追求的吗？

Answer 2

Muh*_*aqi 3

我所做的就是将 id 分配给列表中的每个链接（也是页面名称），并创建一个在页面主体加载时调用的 js 函数。该函数从 url 获取当前文件名并确定这是哪个页面，然后通过 js 我使该链接类处于活动状态。这解决了我的问题。不过，我分享这个解决方案供其他人改进。

function get_current_page() {
  var pathArray = window.location.pathname.split("/");
  var current_page = pathArray[pathArray.length - 1];
  current_page_array = current_page.split(".");
  current_page = current_page_array[0];

  if (
    current_page == "students" ||
    current_page == "my-profile" ||
    current_page == "faqs" ||
    current_page == "forecast-career"
  ) {
    document.getElementById("joinuslist").className += " active";
    document.getElementById("joinus").className += " in";

    if (current_page == "students") {
      document.getElementById("students").className += " active";
    } else if (current_page == "faqs") {
      document.getElementById("faqs").className += " active";
    } else if (current_page == "forecast-career") {
      document.getElementById("forecast-career").className += " active";
    } else if (current_page == "my-profile") {
      document.getElementById("my-profile").className += " active";
    } else {
    }
  } else if (
    current_page == "values" ||
    current_page == "ambassadors" ||
    current_page == "documentary"
  ) {
    if (current_page == "values") {
      document.getElementById("values").className += " active";
    } else if (current_page == "ambassadors") {
      document.getElementById("ambassadors").className += " active";
    } else if (current_page == "documentary") {
      document.getElementById("documentary").className += " active";
    } else {
    }
  }
}

Run Code Online (Sandbox Code Playgroud)

.list-group-item.active:hover {
  background-color: #aed248 !important;
  border-color: #aed248 !important;
}
.list-group-item.active,
.list-group-item.active:hover {
  background-color: #007715 !important;
  border-color: #aed248 !important;
}

#joinus .list-group-item.active,
.list-group-item.active:hover {
  background-color: #adce1b !important;
  border-color: #adce1b !important;
}
#whyptcl .list-group-item.active,
.list-group-item.active:hover {
  background-color: #adce1b !important;
  border-color: #adce1b !important;
}
.panel {
  margin-bottom: 20px;
  background-color: transparent !important;
  border: 0px solid transparent;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

Run Code Online (Sandbox Code Playgroud)

<body onload="get_current_page()">
  <div id="MainMenu">
    <div class="list-group panel">
      <a
        id="whylist"
        href="#why"
        class="list-group-item"
        data-toggle="collapse"
        data-parent="#MainMenu"
        >Menu 1</a
      >
      <div class="collapse" id="why">
        <a
          id="values"
          href="values.html"
          onclick="activate(this)"
          class="list-group-item"
          data-toggle="collapse"
          data-parent="#SubMenu1"
          >Menu 1 a</a
        >
        <a
          id="ambassadors"
          href="ambassadors.html"
          onclick="activate(this)"
          class="list-group-item"
          >Menu 1 b</a
        >
        <a
          id="documentary"
          href="documentary.html"
          onclick="activate(this)"
          class="list-group-item"
          >Menu 1 c</a
        >
      </div>
      <a
        id="joinuslist"
        href="#joinus"
        class="list-group-item"
        data-toggle="collapse"
        data-parent="#MainMenu"
        >Menu 2</a
      >
      <div class="collapse" id="joinus">
        <a
          id="my-profile"
          href="my-profile.html"
          onclick="activate(this)"
          class="list-group-item"
          >Menu 2 a</a
        >
        <a
          id="students"
          href="students.html"
          onclick="activate(this)"
          class="list-group-item"
          >Menu 2 b</a
        >
        <a
          id="forecast-career"
          href="forecast-career.html"
          onclick="activate(this)"
          class="list-group-item"
          >Menu 2 c</a
        >
        <a
          id="faqs"
          href="faqs.html"
          onclick="activate(this)"
          class="list-group-item"
          >Menu 2 e</a
        >
      </div>
    </div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，7 月前
查看次数：	25455 次
最近记录：	10 年，5 月前