Question

我有5个<a> ...

<a id="showtrips">TRIPS</a>
<a id="showeats">EATS</a>
<a id="showfilms">FILMS</a>
<a id="showmusic">MUSIC</a>
<a id="showtravels">TRAVELS</a>

...，我有5个<div>，每个div都有<a>名称的内容。我只想显示所有<a>并只显示<div>，所以我想单击<a>并隐藏其他仅显示所选div的div。

我正在搜索，但是找不到确切的位置，我发现了类似的东西，但无法集成到这个问题中。

这是divs标签

<div id="trips">Content  Trips</div>
<div id="eats">Content  Eats</div>
<div id="films">Content  Films</div>
<div id="music">Content  Music</div>
<div id="travels">Content  Travels</div>

#trips{ display: block };
#eats{ display: none };
#films{ display: none };
#music{ display: none };
#travels{ display: none };

Answer 1

如果您使用的是简单的javascript，则可以使用以下代码切换div：

var mydiv = document.getElementById("myDIV");
if (mydiv.style.display === "none") {
    mydiv.style.display = "block";
} else {
    mydiv.style.display = "none";
}

如果使用jQuery，则可以直接使用切换方法。

$( ".target" ).toggle();

我建议您使用类名称对div和anchor标签进行分组，以便于维护。

您的html代码如下：

<a id="showtrips" class="link">TRIPS</a>
<a id="showeats" class="link">EATS</a>
<a id="showfilms" class="link">FILMS</a>
<a id="showmusic" class="link">MUSIC</a>
<a id="showtravels" class="link">TRAVELS</a>

<div id="trips" class="content">Content  Trips</div>
<div id="eats" class="content">Content  Eats</div>
<div id="films" class="content">Content  Films</div>
<div id="music" class="content">Content  Music</div>
<div id="travels" class="content">Content  Travels</div>

您的JS代码如下所示：

document
  .querySelectorAll('[class="link"]')
  .forEach(element => element.onclick = () => {
    document
      .querySelectorAll('[class="content"]')
      .forEach(element => {
        element.style.display = 'none';
      });
    const mydiv = element.id.substr(4);
    document.getElementById(mydiv).style.display = 'block'; 
  });

我刚刚为您创建了有效的jsfiddle链接here

Answer 2

这应该做到这一点，尽管除了与div标记匹配的div以外，它会隐藏所有 a个点击。我建议添加一些内容来标识要显示/隐藏的div。这只需要香草js。

const test = document
  .querySelectorAll('[id*="show"]')
  .forEach(element => element.onclick = () => {
    document
      .querySelectorAll('div')
      .forEach(element => {
        element.style.display = 'none';
      });
  
    const divIdToShow = element.id.replace('show', '');
    const divElementToShow = document.getElementById(divIdToShow);
    divElementToShow.style.display = 'block';
    

  });

console.log(test)

#trips {
  display: block;
}

#eats {
  display: none;
}

#films {
  display: none;
}

#music {
  display: none;
}

#travels {
  display: none;
}

<a id="showtrips">TRIPS</a>
<a id="showeats">EATS</a>
<a id="showfilms">FILMS</a>
<a id="showmusic">MUSIC</a>
<a id="showtravels">TRAVELS</a>

<div id="trips">Content  Trips</div>
<div id="eats">Content  Eats</div>
<div id="films">Content  Films</div>
<div id="music">Content  Music</div>
<div id="travels">Content  Travels</div>

Answer 3

这很简单。您有2个选项：在每个标记上添加“ onclick”事件，然后使用js监听这些事件。或者，由于您已向每个标签添加了ID，因此现在可以使用js将点击事件附加到它们。

所以，没有更多的话了。这是简单的解决方案：

${BASH_REMATCH[2]}

pattern='"access_token":"([^"]*)"'
echo pattern $pattern
if [[ $response =~ $pattern ]]; then

    access_token="${BASH_REMATCH[1]}"
    instanceFromRest="${BASH_REMATCH[2]}"
    echo "instance is now ${instanceFromRest}"
    #uncomment to check token results
    echo "token: ${access_token}"

    echo now firing the mail url

    #now run whatever REST API query, insert, delete, etc... you want
    curl https://login.salesforce.com/services/data/v43.0/query?q=Select+Id+From+Account+LIMIT+5 -H "Authorization: Bearer ${access_token}" -H "X-PrettyPrint:1" 
else
    #whoops - what happened?
    echo "something went terribly wrong :("
fi

document.getElementById("showtrips").onclick = toggleShowForElement(document.getElementById("trips"));

document.getElementById("showeats").onclick = toggleShowForElement(document.getElementById("eats"));

document.getElementById("showfilms").onclick = toggleShowForElement(document.getElementById("films"));

document.getElementById("showmusic").onclick = toggleShowForElement(document.getElementById("music"));

document.getElementById("showtravels").onclick = toggleShowForElement(document.getElementById("travels"));

function toggleShowForElement(element) {
  return () => {
    if (element.style.display === "none") {
       element.style.display = "block";
    } else {
       element.style.display = "none";
    }
  }
}

只是添加了一些CSS，使其看起来更漂亮。在这里不需要。

使用JS显示和隐藏div

3 个答案: