javascript - 将菜单导航链接到两个不同选项卡中具有相同 ID 的两个 div

Question

我正在制作一个带有菜单导航的网页，该导航跳转到单个页面中的每个 div。然后我创建了一个选项卡来拆分具有相同类别但不同内容的部分。现在菜单导航只适用于第一个选项卡，而不适用于第二个选项卡。任何帮助将不胜感激。

这是我的代码:

 <ul class="nav">
        <li><a href="#home">Home</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#about">Details</a></li>
        <li><a href="#demo">Demo video</a></li>
    </ul>
    
     <div class="myTab">
        <ul class="nav-tab">
    		<li data-target="myTab" class="active">product1</li>
    		<li data-target="myTab">product2</li>
        </ul>
        <div class="inner-tab">
    		<div class="item active">
    			<div class="features">
    				<p>features of p1</p>
    			</div>
    			<div class="about">
    				<p>about of p1</p>
    			</div>
    			<div class="demo">
    				<p>demo of p1</p>
    			</div>
    		</div>
    		<div class="item">
    			<div class="features">
    				<p>features of p2</p>
    			</div>
    			<div class="about">
    				<p>about of p2</p>
    			</div>
    			<div class="demo">
    				<p>demo of p2</p>
    			</div>
    		</div>
        </div>
    </div>

Answer 1

执行此操作的一种非常简单的方法是为每个元素提供一个唯一的 ID，并从菜单中的 anchor 标记引用该 ID。您不能引用应用于多个元素的类，它必须是唯一的 ID。我在代码片段中提供了一个示例。

您可以使用 javascript 滚动到一个元素，这往往会提供更好的体验。参见 here .

#nav {
  padding-bottom: 100px;
}

#nav ul {
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#nav ul a {
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:"Helvetica"
}

#nav ul li {
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#nav ul li.current-menu-item {
	background:#ddd
}

#nav ul li:hover {
	background:#f6f6f6
}

#nav ul ul {
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#nav ul ul li {
	float:none;
	width:200px
}

#nav ul ul a {
	line-height:120%;
	padding:10px 15px
}

#nav ul ul ul {
	top:0;
	left:100%
}

#nav ul li:hover > ul {
	display:block
}

div {
  margin: 200px 0;
}

<nav id="nav">
<ul>
  <li class="current-menu-item"><a href="#">Home</a></li>
  <li><a href="#">Features</a>
    <ul>
      <li><a href="#p1-features">Product 1</a></li>
      <li><a href="#p2-features">Product 2</a></li>
    </ul>
    
  <li><a href="#">Details</a>
    <ul>
      <li><a href="#p1-about">Product 1</a></li>
      <li><a href="#p2-about">Product 2</a></li>
    </ul>
    
  <li><a href="#">Demo Video</a>
    <ul>
      <li><a href="#p1-demo">Product 1</a></li>
      <li><a href="#p2-demo">Product 2</a></li>
    </ul>
</ul>
</nav>

<div class="item active">
  <div id='p1-features' class="features">
    <p>features of p1</p>
   </div>
  <div id='p1-about' class="about">
    <p>about of p1</p>
  </div>
  <div id='p1-demo' class="demo">
    <p>demo of p1</p>
  </div>
  </div>
<div class="item">
  <div id='p2-features' class="features">
    <p>features of p2</p>
  </div>
  <div id='p2-about' class="about">
    <p>about of p2</p>
  </div>
  <div id='p2-demo'class="demo">
    <p>demo of p2</p>
  </div>
</div>