Question

我想要一个动态导航栏，以便我有三个标签：

行为应该是当我点击一个标签时，它会将我重定向到该标签含义的页面部分，并且还有导航标签，以便我可以导航。一些图像显示了我试图解释的内容：

我想要的是浏览这些标签，不知何故，我的代码无法实现。

<ul class="nav nav-tabs">                                      
<li role="presentation" {if $nvTb eq 0} class="active" style="color: #9a8745" {/if}>
    <a role="tab" {if $nvTb eq 1} id="fichaScroll" {else} data-toggle="tab" {/if}>                            
        {assign var="iddiccionario" value=$arrayProductoSubmenu["ficha"]["iddiccionario"]}
        {$diccionario.$iddiccionario}
    </a>
</li>
<li role="presentation" {if $nvTb eq 1} class="active" style="color: #9a8745" {/if}>
    <a role="tab" 
       {if $nvTb eq 0} id="galeriaScroll" {else} data-toggle="tab" {/if}> 

        {$diccionario.dic_miniaturas}
    </a>
</li>
<li role="presentation" {if $nvTb eq 2} class="active" style="color: #9a8745" {/if}>
    <a role="tab" {if $nvTb eq 0} id="opinionesScroll" {else} data-toggle="tab" {/if}>
        {$diccionario.dic_opiniones_productos}
    </a>
</li>

任何帮助？

这里也是整个页面的图像。

Answer 1

我在一个新答案中发布了这个，因为它真的很大，它会搞砸另一个答案。您可以更改导航栏的外观并将css添加到其中。但这应该很简单。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="150" id="home">
<div id="Description">
	<div class="navbar-wrapper">
		<div class="container">
			<nav class="navbar">
				<div class="container">
					<div id="navbar" class="navbar-collapse collapse">
						<ul class="nav navbar-nav">
							<li class="active"><a href="#Description">Description</a></li>
							<li><a href="#Thumbnails">Thumbnails</a></li>
							<li><a href="#Customer_Reviews">Customer Reviews</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	</div>
	<div>
		<h2>Description</h2>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet..</p>
	</div>
</div>
	
	<hr />
	
<div id="Thumbnails">
	<div class="navbar-wrapper">
		<div class="container">
			<nav class="navbar">
				<div class="container">
					<div id="navbar" class="navbar-collapse collapse">
						<ul class="nav navbar-nav">
							<li><a href="#Description">Description</a></li>
							<li class="active"><a href="#Thumbnails">Thumbnails</a></li>
							<li><a href="#Customer_Reviews">Customer Reviews</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	</div>
	<div>
		<h2>Thumbnails</h2>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet..</p>
	</div>
</div>

	<hr />

<div id="Customer_Reviews">
	<div class="navbar-wrapper">
		<div class="container">
			<nav class="navbar">
				<div class="container">
					<div id="navbar" class="navbar-collapse collapse">
						<ul class="nav navbar-nav">
							<li><a href="#Description">Description</a></li>
							<li><a href="#Thumbnails">Thumbnails</a></li>
							<li class="active"><a href="#Customer_Reviews">Customer Reviews</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	</div>
	<div>
		<h2>Customer Reviews</h2>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet..</p>
	</div>
</div>
	
	<!-- add the script for smooth scrolling -->
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	<script rel="text/javascript">
		$(function() {
		$('a[href*="#"]').click(function() {
			if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			  var target = $(this.hash);
			  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			  if (target.length) {
				$('html, body').animate({
				  scrollTop: target.offset().top
				}, 750);
				return false;
			  }
			}
		  });
		});
	</script>
</body>

＆＃13;

Answer 2

你的意思是here吗？

也许请查看此文件here。（上页的源代码）

它如何运作？

导航栏中的锚标记指的是“#home”，例如<a class="navbar-brand" href="#home">SchoolTool</a>，目标位于id-tag <div id="home"><p>The Home section </p></div>。

然后它应该跳到这个位置。

如果您想平滑滚动，请查看此脚本：

<script rel="text/javascript">
        $(function() {
        $('a[href*="#"]').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
              var target = $(this.hash);
              target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
              if (target.length) {
                $('html, body').animate({
                  scrollTop: target.offset().top
                }, 750);
                return false;
              }
            }
          });
        });
    </script>

它只是从浏览器中显示的网址中删除标记，并以750毫秒进行平滑滚动。

正确的导航标签配置

2 个答案: