Ссылки на панель навигации на внутренние html-страницы не работают - PullRequest
Новая
       46

Ссылки на панель навигации на внутренние html-страницы не работают

0 голосов
/ 16 февраля 2019

Я создал сайт для одного из моих клиентов с этим шаблоном - http://www.templatemo.com/tm-395-urbanic

Сайт http://www.southholstonriverlodge.com

Они недавно хотели, чтобы я изменил панель навигации.Ранее он был связан только с якорями в шаблоне, который работал нормально.Я пытался изменить его, чтобы ссылаться на другие страницы, например.

<li class="active"><a href="index.html" title="Home">HOME</a></li>

и они больше не работают.Ссылки навигации, которые идут к якорям, все еще работают, и ссылки, которые идут на внешние страницы, работают.И я могу щелкнуть правой кнопкой мыши и открыть страницы в новых вкладках, но прямой щелчок ничего не делает.Я так много пытался это исправить и просто никуда не денется.Идеи?Я даже не знаю, где искать.Я довольно новичок в начальной загрузке, и я работал над реализацией выпадающего списка, думая, что это проблема, и удалил ее.Я включу некоторые фрагменты кода, но я даже не знаю, с чего начать.

.nav > li > a {
    padding: 10px 10px;
}

.nav > li > a:hover,
.nav > li > a:focus {
    background-color: #648c33;
    color:#fff;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    background-color: #648c33;
    color:#fff;
}


.nav > li > a {
    color: #929292;
}
.navbar-default {
    background-color:#fff;
    border:none;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: #005200;
    color: #fff;
}

.navbar {
    margin-bottom: 0px;
}
<!DOCTYPE html>
<html lang="en"><!-- InstanceBegin template="/Templates/SHRL Template.dwt" codeOutsideHTMLIsLocked="false" --><head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>South Holston River Lodge | World Class Fishing | Luxury Lodging</title>
<!-- InstanceEndEditable -->
<meta name="keywords" content="south holston river lodge, lodge, soho, tennessee fly fishing, tennessee lodge, south holston, fly fishing, float, wade, guide, all inclusive, lodging, vacation, trips, cabins, home, bristol, tennessee, tn, destination, eastern tennessee" />
<meta name="description" content="South Holston River Lodge is located in Eastern Tennessee. It is a destination fly fishing lodge with excellent year round fishing." />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-51645845-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-51645845-1');
</script>
<!--

Urbanic Template

http://www.templatemo.com/tm-395-urbanic

-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="shortcut icon" href="PUT YOUR FAVICON HERE">-->
<link rel="shortcut icon" href="images/favicon.ico?v1.ico">
<!-- Google Web Font Embed -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="js/colorbox/colorbox.css"  rel="stylesheet" type='text/css'>
<link href="css/templatemo_style.css"  rel="stylesheet" type='text/css'>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<!-- InstanceParam name="OptionalRegion1" type="boolean" value="true" -->
</head>
    
    <body>

        <div class="templatemo-top-bar" id="templatemo-top">
            <div class="container">
                <subheader>
                    <div id="phone" class="pull-left">
                            <img src="images/phone.png" alt="phone">
                             877.767.7875
                    </div>
					<div id="email" class="pull-right">
                            <img src="images/email.png" alt="email" title="Email Icon"> bookings@southholstonriverlodge.com
                    </div>
                </subheader>
            </div>
        </div>
        <div class="templatemo-top-menu">
            <div class="container">
                <!-- Static navbar -->
                <div class="navbar navbar-default" role="navigation">
                    <div class="container">
                        <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                </button>
                                <a href="index.html" class="navbar-brand"><img src="images/sohorl.png" alt="SHRL Logo" width="200" title="South Holston River Lodge" /></a>
                        </div>
						
                        <div class="navbar-collapse collapse" id="templatemo-nav-bar">
                            <ul class="nav navbar-nav navbar-right" style="margin-top: 40px;">
                              <li class="active"><a href="index.html" title="Home">HOME</a></li>
                              <li><a href="about.html">ABOUT US</a></li>
                                <li><a href="#templatemo-blog" title="Services">SERVICES</a></li>
                                <li><a rel="nofollow" href="https://www.flickr.com/photos/138605916@N04/albums" class="external-link" title="Photo Gallery" target="_blank">GALLERY</a></li>
								<li><a rel="nofollow" href="https://southholstonriverlodge.wordpress.com/" class="external-link" title="Fishing Report" target="_blank">FISHING REPORT</a></li>
                                <li><a href="#templatemo-contact" title="Contact">CONTACT</a></li>
                            </ul>
                        </div>
						
                     
						<!--/.nav-collapse -->
                    </div><!--/.container-fluid -->
                </div><!--/.navbar -->
            </div> <!-- /container -->
        </div>

Ответы [ 2 ]

0 голосов
/ 16 февраля 2019

Я заметил id="templatemo-nav-bar" в вашем шаблоне, и когда я ищу в Интернете это, я нахожу людей, предлагающих добавить class="external" к ссылке: 

<a href="index.html" title="Home" class="external">HOME</a>

Я не могу проверить это сам, потому что вашпример, вероятно, отсутствует какой-то JavaScript.Надеюсь, это поможет:)

РЕДАКТИРОВАТЬ

Глядя на шаблон сценария, это может быть на самом деле class="external-link": 

<a href="index.html" title="Home" class="external-link">HOME</a>

Это должно открепитьобработчик событий click, позволяющий ссылке работать должным образом.

0 голосов
/ 16 февраля 2019

Глядя на шаблон, который вы связали, похоже, что нажатие на ссылки делает плавную прокрутку вниз страницы вместо использования встроенной функции привязки браузера.Это означает, что есть некоторый JavaScript, обрабатывающий это и переопределяющий поведение браузера по умолчанию.В javascript шаблона здесь мы видим этот раздел: 

// scroll to specific id when click on menu
$('.templatemo-top-menu .navbar-nav a').click(function(e){
  e.preventDefault(); 
  var linkId = $(this).attr('href');
  scrollTo(linkId);
  if($('.navbar-toggle').is(":visible") == true){
    $('.navbar-collapse').collapse('toggle');
  }
  $(this).blur();
  return false;
});

Он переопределяет поведение ссылки по умолчанию в браузере, используя e.preventDefault(), а затем используя scrollTo() для перемещения страницы.К сожалению, я думаю, что это означает, что вы в значительной степени застряли с таким поведением, если только вы не можете изменить javascript или шаблон значительно.

...