Question

我试图找出导航菜单中选择了哪个确切的列表项。有了这些信息，我将从上一个菜单链接中删除课程active，并将其添加到新选择的课程中。

<ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#pageOne">Home</a></li>
      <li><a href="#pageTwo">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
</ul>

JavaScript的：

let menuClick = document.getElementsByClassName(".nav");
menuClick.addEventListener('click', changeActive(), false);

function changeActive(){
     //enter code here
}

Answer 1

获取nav的节点列表的第一个元素：

let menuClick = document.getElementsByClassName("nav")[0];

附加事件监听器（注意：changeActive而不是changeActive()）。这将使用事件委派来捕获从锚点冒出的事件。

menuClick.addEventListener('click', changeActive, false);

现在为您的函数添加一些代码：

function changeActive(e){

  // grab the element that's active
  let active = this.querySelector('li.active');

  // remove the class
  active.classList.remove('active');

  // add the active class to the parent of the clicked anchor
  e.target.parentNode.classList.add('active');
}

DEMO

Answer 2

使用

Vanilla JS - here also

strict

我不会强迫你使用DEMO，但你应该考虑做更多的事情，并编写更少的代码。 :)。这是jQuery版本

jQuery - jQuery

var menuItems = document.querySelectorAll(".nav a"); // Get all matching selectors; same as SizzleJS $(selector) 

for(var i=0; i < menuItems.length; i++){ // Loop through each element and add click event listener 

         menuItems[i].addEventListener('click', function(event){ // adding event listener.
           event.preventDefault();
           for(var i=0; i < menuItems.length; i++){
              menuItems[i].parentElement.className = ''; // remove current `active` class from parent element `li`. This is not the best approach for removing classes in Vanilla JavaScript; see this answer http://stackoverflow.com/a/2155786/2151050
           }
           this.parentElement.className = 'active'; // add `active` to current clicked element.
         }, false);

}

Answer 3

有很多方法可以做到：

1）您可以使用onhashchange来检测哈希更改

Button a = (Button) findViewById(R.id.button);

    a.setOnClickListener(new View.OnClickListener() {

        @Override

        public void onClick(View v) {

            startActivity(new Intent(LambertsLaneSection1Activity.this, Pop.class));

        }
    });
    Button b = (Button) findViewById(R.id.button3);
    b.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            startActivity(new Intent(LambertsLaneSection1Activity.this, Pop.class));


        }
    });
    Button c = (Button) findViewById(R.id.button4);
    c.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            startActivity(new Intent(LambertsLaneSection1Activity.this, Pop.class));


        }
    });

2）或者只是将点击事件绑定到菜单项

HTML：

function locationHashChanged() {
    if(location.hash === "#pageOne") {
         // do something
    }
    else if(location.hash === "#pageTwo") {
       // do something
    }
}
window.onhashchange = locationHashChanged;

JS：

<ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#pageOne">Home</a></li>
      <li><a href="#pageTwo">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
</ul>

Answer 4

这是一种使用javascript的方式。请注意，您必须循环以向菜单中的所有对象添加单击处理程序。

这是一个片段

function click(e){
alert(e.target.innerHTML);
}
var el=document.getElementsByClassName('nav navbar-nav navbar-right')
for(var i=0;i<el.length;++i){
function t(i){
el[i].addEventListener('click',click,false)
}
t(i)
}

<ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#pageOne">Home</a></li>
      <li><a href="#pageTwo">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
</ul>

如何找出选择了哪个列表项？

4 个答案:

Vanilla JS - here also

jQuery - jQuery