Блог

Я создаю шаблон одной страницы. Я решил добавить вторую страницу, которая отражает главную страницу. Мне пришлось изменить код ссылки на панели навигации, чтобы указывать на различные разделы главных страниц (Т. Е.: вместо просто #about , я сделал это index.html#about ). Однако эти ссылки не работают. Если я использую «inspect» в Chrome и ctrl щелчок по ссылке в коде, это сработает, поэтому я думаю, что что-то в CSS мешает этому разделу фактически щелкнуть ссылку.

Страница с проблемами www.homexphoto.ca/pricing.html

Навигационный HTML-код

 <div class="sidebarnav hidden-sm hidden-xs">
            <div class="logo">
                <a href="index.html"><img id="topleftlogo" src="images/transparentlogowhite.png"> Home Expressions <br><em>Photography</em></a>
            </div>
            <nav>
                <ul>
                    <li>
                        <a href="index.html">
                            <span class="rect"></span>
                            <span class="circle"></span>                          
                            Home
                        </a>
                    </li>
                    <li>
                        <a href="index.html#services">
                            <span class="rect"></span>
                            <span class="circle"></span>
                            Services
                        </a>
                    </li>
                    <li>
                        <a href="index.html#pricing">
                            <span class="rect"></span>
                            <span class="circle"></span>
                            Pricing
                        </a>
                    </li>
                    <li>
                        <a href="index.html#portfolio">
                            <span class="rect"></span>
                            <span class="circle"></span>
                            Portfolio
                        </a>
                    </li>
                    <li>
                        <a href="index.html#about">
                            <span class="rect"></span>
                            <span class="circle"></span>
                            About
                        </a>
                    </li>
                    <li>
                        <a href="index.html#contact">
                            <span class="rect"></span>
                            <span class="circle"></span>
                            Contact Us
                        </a>
                    </li>
                </ul>
            </nav>
  

Навигационный CSS

 /* Sidebar navigation secondary pages */
.sidebarnav {
  width: 22%;
  float: left;
  height: 100%;
  position: fixed;
  background-color: rgba(12,12,12,0.9);
  z-index: 10;
}

.sidebarnav .logo {
  position: absolute;
  width: 100%;
  height: 140px;
  line-height: 26px;
  background-color: #585858;
  padding: 20px;
  text-align: center;
}

.sidebarnav .logo a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  font-weight: 525;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  height: 100px;
  width: 100%;
  display: inline-block;
  border: 1px solid rgba(250,250,250,0.5);
  border-radius: 15px;
  padding: 9px 2px 0px 2px;
  
}

.sidebarnav .logo em {
  font-style: normal;
  font-weight: 300;
   
}

.sidebarnav nav {
  position: relative;
  top: 60%;
  left: 60%;
  -webkit-transform: translateX(-60%) translateY(-60%);
  -moz-transform: translateX(-60%) translateY(-60%);
  -ms-transform: translateX(-60%) translateY(-60%);
  -o-transform: translateX(-60%) translateY(-60%);
  transform: translateX(-60%) translateY(-60%);
}

.sidebarnav ul {
  margin-left: 45px;
  list-style: none;
  padding: 0;
}
.sidebarnav li{
  padding: 10px 0;
}
.sidebarnav span{
  display: inline-block;
  position: relative;
}
.sidebarnav nav a{
  display: inline-block;
  color: #fff;
  margin-top: 5px;
  text-decoration: none!important;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}

.sidebarnav nav a:focus {
  color: #fff;
}
.sidebarnav nav a:hover, nav .active-section {
  color: #fff;
}
.sidebarnav nav a:hover span, nav .active-section span{
  background-color: #ddd;
}
.sidebarnav nav .active-section .rect{
  width: 30px;
}
.sidebarnav nav .active-section .circle{
  background-color: #fff;
}

.sidebarnav .social-icons {
  position: absolute;
  width: 100%;  
  bottom: 10px;
  padding: 0;
  margin: 0;
  text-align: center;
}

.sidebarnav .social-icons li {
  display: inline-block;
  margin-right: 15px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.sidebarnav .social-icons li:last-child {
  margin-right: 0px;
}

.sidebarnav .social-icons li a {
  font-size: 18px;
  color: #fff;
  transition: all 0.5s;
}

.sidebarnav .social-icons li a:hover {
  color: #45489a;
}
  

Я упускаю что-то простое здесь? Шаблон, который я использую, также имеет Javascript, который я стараюсь не трогать, поскольку у меня еще нет навыков. Я надеюсь, что это как-то не блокирует это.

Приветствия

РЕДАКТИРОВАТЬ — если я щелкаю правой кнопкой мыши по навигационным ссылкам на боковой панели и «открываю в новой вкладке», они работают! Но один щелчок кажется отключенным?

Когда я щелкаю правой кнопкой мыши и выбираю «открыть ссылку в новом окне», все работает как ожидалось, открывается новая страница, поэтому ссылки правильные.

Я подозреваю, что существует некоторый javascript, который содержит «preventDefault ()» для ссылок, чтобы выполнить анимацию прокрутки или что-то подобное.

На самом деле, это, похоже, шаблон для одностраничника — ссылки действительно работают (с использованием анимированной прокрутки) на index.html странице…

Итак, взгляните на файлы JS и найдите «preventDefault»…

Дополнение после комментариев: этот фрагмент кода помог мне решить аналогичную проблему некоторое время назад:

 jQuery(function ($) {
    $(document).ready(function() {
        if(window.location.hash) {
            var hash = window.location.hash;
            $( 'a[href='   hash   ']' ).click();
        }
    });
});