Добавление функциональности к гиперссылке

Question

Есть ссылка

<li><a href="../html/testsite.html" id="monoblocks">Моноблоки</a></li>

Необходимо, чтобы при клике на неё помимо перехода на страницу ../html/testsite.html- на этой странице добавлялся контент

$('.headercontent .menucategoryitem .menu__item ul li a #monoblocks').on('click', function(event) {
  // event.preventDefault();
  console.log('Checkmenuitem');
  subcategoryflag = event.target.innerHTML;
  console.log(subcategoryflag);
  let windowclose = document.querySelector('#dropdownwindow');
  windowclose.style.display = "none";
  $.ajax({
    method: 'POST',
    url: '../php/ajaxsubcategory1.php',
    cache: false,
    data: {
      subcategoryflag: subcategoryflag
    },
    dataType: 'json',
    complete: function(data) {
      console.log(data.header);
      console.log(data.countrecords);
    },
    success: function(data) {
      console.log('check');
      console.log(data);
      $('.rightmenu').html(data.result.msg);
      displayProductItems(data);
    }
  })
});

function displayMenuItem(headerMenuItem) {
  // console.log('BeforeOK');
  document.querySelector('#' + headerMenuItem).addEventListener('mouseover', (event) => {
    event.target.style.cursor = "pointer";
    event.target.classList.add('menulistitem_selected');
    fetch('../html/' + headerMenuItem + '.html')
      .then(r => r.text())
      .then(data => {
        document.querySelector('#CatalogMenuRight').innerHTML = data
      });
  });
  document.querySelector('#' + headerMenuItem).addEventListener('mouseout', (event) => {
    event.target.style.cursor = "pointer";
    event.target.classList.remove('menulistitem_selected');
  });
  // console.log('AfterOK');
};

let categoryflag = '';
$('#monoblocks').on('click', function(event) {
  // event.preventDefault();
  console.log('Checkmenuitem');
  subcategoryflag = event.target.innerHTML;
  console.log(subcategoryflag);
  let windowclose = document.querySelector('#dropdownwindow');
  windowclose.style.display = "none";

  $.ajax({
    method: 'POST',
    url: '../php/ajaxsubcategory1.php',
    cache: false,
    data: {
      subcategoryflag: subcategoryflag
    },
    dataType: 'json',
    complete: function(data) {
      console.log(data.header);
      console.log(data.countrecords);
    },
    success: function(data) {
      console.log('check');
      console.log(data);
      $('.rightmenu').html(data.result.msg);
      //displayProductItems(data);
      let centeroutput = '<div id=\"topcenterarea\">' + '<h1>' + data.result.header + ' ' + data.result.countrecords + ' товара' + data.output[0]['screendiagonal'] + '</h1>' + '</div>';


      productcardsoutput = '';
      // productcard='<div class="ProductCardBlock">';


      for (let i = 0; i < data.result.countrecords; i++) {
        productcard = '<div class="ProductCardBlock">';
        productcard += '<div class="dynamic ProductImage">';
        productcard += '<div id="ImageWrapper">';
        productcard += '<img class="ProductPicture" src=' + '"../images/' + data.output[i]['imagepath'] + '">';
        productcard += '</div>';
        productcard += '</div>';
        productcard += '<div class="dynamic ProductDescription">';
        productcard += '<div class="ProductName">' + data.output[i]['monoblockname'] + ', ' + data.output[i]['color'] + '</div>';
        productcard += '<div class="ProductScreenParamsWrapper">' + '<span class="text">' + 'Диагональ/разрешение ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductScreenParams">' + ' ' + data.output[i]['screendiagonal'] + '/' + data.output[i]['resolution'] + 'пикс.' + '</span>' + '</div>';
        productcard += '<div class="ProductCpuTypeWrapper">' + '<span class="text">' + 'Тип процессора ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductCpuType">' + ' ' + data.output[i]['cputype'] + '</span>' + '</div>';
        productcard += '<div class="ProductCpuFrequencyWrapper">' + '<span class="text">' + 'Частота процессора ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductCpuFrequency">' + ' ' + data.output[i]['frequency'] + '</span>' + '</div>';
        productcard += '<div class="ProductRAMWrapper">' + '<span class="text">' + 'Оперативная память (RAM) ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductRAM">' + ' ' + data.output[i]['ramsize'] + '</span>' + '</div>';
        productcard += '<div class="ProductVideoCardWrapper">' + '<span class="text">' + 'Графический контроллер ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductVideoCard">' + ' ' + data.output[i]['videocard'] + '</span>' + '</div>';

        if (data.output[i]['memorytype'] == 'SSD') {
          productcard += '<div class="ProductDisksAndDrivesWrapper">' + '<span class="text">' + 'Объем SSD ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductDisksAndDrives">' + ' ' +
            data.output[i]['sizememorydata'] + '</span>' + '</div>';
        } else if (data.output[i]['memorytype'] == 'HDD') {
          productcard += '<div class="ProductDisksAndDrivesWrapper">' + '<span class="text">' + 'Объем HDD ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductDisksAndDrives">' + ' ' + data.output[i]['sizememorydata'] + '</span>' + '</div>';
        };

        productcard += '</div>';
        productcard += '<div class="dynamic ProductBuyPart">' + '<button type="submit" class="ProductAddToBasket" value="В корзину">Купить</button>' + '</div>';

        productcard += '</div>';
        productcardsoutput += productcard;
      }

      centeroutput += productcardsoutput;


      $('.centerarea').html(centeroutput);



    }
  })
});

document.getElementById('dropdownwindow').style.position = "fixed";
document.getElementById('dropdownwindow').style.marginLeft = "0";
document.getElementById('dropdownwindow').style.marginTop = "0";
document.getElementById('dropdownwindow').style.display = "block";
console.log(document.getElementById('dropdownwindow').style.display);
document.getElementById('dropdownwindow').style.marginRight = "20%";
document.getElementById('dropdownwindow').style.width = "80%";
/*document.getElementById('dropdownwindowright').style.marginRight="20%";
document.getElementById('dropdownwindowright').style.marginLeft="20%";              
document.getElementById('dropdownwindowright').style.width="60%";               
*/
document.getElementById('dropdownwindowright').style.flex = "60%";
/*divfreespace.style.width="20%";
divmenuleft.style.display="block";
divmenuright.style.display="block";     divmenusearch.style.display="block";
divfreespace.style.display="block";*/
document.getElementById('dropdownwindow').style.backgroundColor = "#ffffff";
/*
const menuelems=document.querySelectorAll('.menulistitem');
menuelems.forEach((menuelem) => { menuelem.addEventListener('mouseover', (event) => { event.target.style.cursor = "pointer";event.target.classList.add('menulistitem_selected')});
menuelem.addEventListener('mouseout', (event) => { event.target.style.cursor = "pointer"; event.target.classList.remove('menulistitem_selected')});             
});
*/

let idnumber = 0;
/*
const smartphonesandgadgets=document.querySelector('#smartphonesandgadgets');
smartphonesandgadgets.addEventListener('mouseover', (event) => { 
    event.target.style.cursor = "pointer";
    event.target.classList.add('menulistitem_selected'); 
    fetch('../html/smartphonesandgadgets.html')
        .then(r => r.text())
        .then(data => {document.querySelector('#CatalogMenuRight').innerHTML = data});
}
)
*/

let array = ['smartphonesandgadgets', 'notebooksandpcs', 'tvsaudiovideohifi', 'householdappliancesforhomeandkitchen', 'constructionandrepair', 'houseandcottage', 'photosvideossecuritysystems', 'automotiveproducts', 'officesuppliesfurnitureandofficeequipment', 'beautyandhealth', 'sportsandrecreation', 'productsforgamers', 'discountedproducts', 'giftcertificates', 'services'];
for (let item of array) {
  // console.log('iteration');
  displayMenuItem(item);
}

.contentpart {
  display: grid;
  grid-template-areas: "leftsidemenu centercolumn rightsidemenu";
  grid-template-columns: 300px 1fr 245.8px;
  /*height: 100vh;*/
  margin: 0;
  grid-area: centerpart;
}

.leftmenu {
  grid-area: leftsidemenu;
}

.centerarea {
  grid-area: centercolumn;
  background-color: rgb(255, 255, 255);
}

.rightmenu {
  grid-area: rightsidemenu;
}

#pageHeader {
  grid-area: header;
  width: 100%;
  /*
    display: flex;
    justify-content: space-between;
    align-items: center;
    */
}

#pageFooter {
  grid-area: footer;
  width: 100%;
}

.bodyclass {
  display: grid;
  grid-template-areas: "header" "centerpart" "footer";
  grid-template-rows: 100px 1fr 743px;
  height: 100vh;
  margin: 0;
}

.CatalogMenuLeft {
  width: 25%;
}

#dropdownwindow {
  display: block;
  margin-left: 0;
  margin-right: 100%;
  height: 100vh;
  z-index: 5;
}

#fullblock {
  height: 100vh;
  position: static;
}

.contentdropdownwindow {
  display: flex;
  /*justify-content: center;*/
}

.CatalogMenuLeft {
  width: 25%;
}

.CatalogMenuRight {
  /*height: 1278px;*/
}

.catalogheader {
  width: 100%;
  height: 30%;
  /*display: flex;*/
  /*justify-content: center;*/
  margin-left: auto;
  margin-right: auto;
}

.crossline,
.bottompart {
  flex: 1;
  /*width: 100%;*/
  /*height: 33%;*/
}

.crosslineright {
  width: 100%;
  /*margin-top: 40px;*/
  /*margin-left: 20px;*/
  /*margin-right: 20px;*/
  /*align: right;*/
  text-align: right;
}

.windowheader {
  flex: 1;
  /*width: 100%;*/
  /*height: calc(100% - 2*37.5px);*/
  /*height: 34%;*/
  margin: auto;
  text-align: center;
}

.windowheader h4 {
  flex: 1;
  /*width: 100%;*/
  margin: auto;
  text-align: center;
}

.flexdisabledscrollbar1,
.flexdisabledscrollbar2,
.flexdisabledscrollbar3 {
  flex: 0;
  width: 5px;
  border-right: 5px solid #f5f5f6;
}

.flexline1 {
  display: flex;
  justify-content: center;
  height: 33%;
}

.flexline2 {
  display: flex;
  justify-content: center;
  height: 34%;
}

.flexline3 {
  display: flex;
  justify-content: center;
  height: 33%;
}

.menulistitem_selected {
  font-weight: bold;
  cursor: pointer;
}

.menulistitem_selected::after {
  content: "\2192";
  /*position: absolute;*/
  margin-left: 5px;
  display: inline-block;
  font-weight: 400;
  transition: all .1s ease;
}

.close {
  margin-top: -14px;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 24px;
  cursor: pointer;
  display: inline-block;
}

.CatalogMenuRight {
  /*flex: 1;*/
  overflow: auto;
  height: 600px;
}


/*.menulistitem {
    padding-top: 5px;
    padding-bottom: 5px;
}
*/


/* Works on Firefox */

.CatalogMenuRight {
  scrollbar-width: auto;
  scrollbar-color: #b8b8bc #f5f5f6;
  /*overflow-y: scroll;*/
  /*height: 200px;*/
}


/* Works on Chrome, Edge, and Safari */

.CatalogMenuRight::-webkit-scrollbar-button {
  display: none;
}

.CatalogMenuRight::-webkit-scrollbar {
  width: 5px;
}

.CatalogMenuRight::-webkit-scrollbar-track {
  background: #f5f5f6;
}

.CatalogMenuRight::-webkit-scrollbar-thumb {
  background: #b8b8bc;
  border-radius: 2.5px;
  border: 0px solid #f5f5f6;
}

.CatalogMenuRight::-webkit-scrollbar-thumb:hover {
  background: #b8b8bc;
}

#dropdownwindowright {
  width: 75%;
}

.CatalogMenuSearch #SearchBlock {
  /*border-bottom: 1px solid orange;*/
}

#SearchBlock {
  padding-top: 5px;
  /*padding-left: 25px;*/
  margin-left: 25px;
  margin-right: 50px;
  /*padding-right: 50px;*/
  display: flex;
  /*justify-content: flex-end;*/
  height: 35px;
  border-bottom: 1px solid #dfdfe1;
}

#SearchInputdiv {
  height: 100%;
  width: calc(100%-35px);
  flex: 1;
  /*color: #dfdfe1;*/
  /*flex: calc(100%-35px);*/
}

#SearchInput {
  width: 100%;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

#SearchButtondiv {
  height: 100%;
  justify-content: flex-end;
  width: 35px;
  /*flex: 35px;*/
}

#SearchButton button svg {
  vertical-align: middle;
  fill: #dfdfe1;
  /*justify-content: flex-end;
    flex: 35px;*/
}

#SearchButton {
  outline: none;
  border: none;
  background: transparent;
  cursor: pointer;
}

#SearchButton:active {
  outline: 1px solid blue;
}

<!--Содержимое страницы ../html/testsite.html-->
<div id="dropdownwindow">
  <div class="contentdropdownwindow">
    <div class="CatalogMenuLeft">
      <div class="catalogheader">
        <div class="flexline1">
          <div class="crossline">
          </div>
          <div class="flexdisabledscrollbar1">
          </div>
        </div>
        <div class="flexline2">
          <div class="windowheader">
            <h4>Каталог</h4>
          </div>
          <div class="flexdisabledscrollbar2">
          </div>
        </div>
        <div class="flexline3">
          <div class="bottompart">
          </div>
          <div class="flexdisabledscrollbar3">
          </div>
        </div>
      </div>

      <!--<div class="flexcontent">-->
      <div class="windowmenulist" id="menulist">
        <div class="menulistitem" id="smartphonesandgadgets">
          Смартфоны и гаджеты
        </div>
        <div class="menulistitem" id="notebooksandpcs">
          Ноутбуки и компьютеры
        </div>
        <div class="menulistitem" id="tvsaudiovideohifi">
          Телевизоры, аудио-видео, Hi-Fi
        </div>
        <div class="menulistitem" id="householdappliancesforhomeandkitchen">
          Бытовая техника для дома и кухни
        </div>
        <div class="menulistitem" id="constructionandrepair">
          Строительство и ремонт
        </div>
        <div class="menulistitem" id="houseandcottage">
          Дом и дача
        </div>
        <div class="menulistitem" id="photosvideossecuritysystems">
          Фото, видео, системы безопасности
        </div>
        <div class="menulistitem" id="automotiveproducts">
          Автотовары
        </div>
        <div class="menulistitem" id="officesuppliesfurnitureandofficeequipment">
          Канцтовары, Мебель и Офисная техника
        </div>
        <div class="menulistitem" id="beautyandhealth">
          Красота и здоровье
        </div>
        <div class="menulistitem" id="sportsandrecreation">
          Спорт и отдых
        </div>
        <div class="menulistitem" id="productsforgamers">
          Товары для геймеров
        </div>
        <div class="menulistitem" id="discountedproducts">
          Уцененные товары
        </div>
        <div class="menulistitem" id="giftcertificates">
          Подарочные сертификаты
        </div>
        <div class="menulistitem" id="services">
          Сервисы и услуги
        </div>
      </div>
      <!--</div>-->
    </div>
    <div class="myscroll">

    </div>
    <div id="dropdownwindowright">
      <div class="crosslineright">
        <div class="close">&times;</div>
      </div>
      <div class="CatalogMenuSearch">
        <div id="SearchBlock">
          <div id="SearchInputdiv">
            <input type="search" placeholder="Поиск по товарам" id="SearchInput">
          </div>
          <div id="SearchButtondiv">
            <button id="SearchButton"><svg class=" Icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.22703 5.22703C7.86307 2.591 12.1369 2.591 14.773 5.22703C17.2298 7.68382 17.3968 11.5632 15.2742 14.2135L19.0607 18L18 19.0607L14.2135 15.2742C11.5632 17.3968 7.68381 17.2298 5.22703 14.773C2.59099 12.1369 2.59099 7.86307 5.22703 5.22703ZM13.7123 6.28769C11.6621 4.23744 8.33794 4.23744 6.28769 6.28769C4.23744 8.33795 4.23744 11.6621 6.28769 13.7123C8.33794 15.7626 11.6621 15.7626 13.7123 13.7123C15.7626 11.6621 15.7626 8.33795 13.7123 6.28769Z"></path></svg></button>
          </div>
        </div>
      </div>
      <div class="CatalogMenuRight" id="CatalogMenuRight">
      </div>
    </div>
  </div>
</div>

<div class="contentpart">
  <div class="leftmenu">
  </div>

  <div class="centerarea">
  </div>

  <div class="rightmenu">
  </div>
</div>

<?php
class ajaxValidate {
    function endsWith($haystack, $needle)
    {
        $count = strlen($needle);
        
        if ($count === 0) {
            return true;
        }
        
        return (substr($haystack, -$count) === $needle);
    }

    function formValidate() {
        //Put form elements into post variables (this is where you would sanitize your data)
        
        function endsWith($haystack, $needle)
        {
            $count = strlen($needle);
        
            if ($count === 0) {
                return true;
            }
        
            return (substr($haystack, -$count) === $needle);
        }
        
        /*$categoryflag=$_POST['categoryflag'];*/
        $subcategoryflag = $_POST['subcategoryflag'];

        //Establish values that will be returned via ajax
        $return = array();
        $return['msg'] = '';
        $return['error'] = false;
        $return['querycontent']='';
        $return['header']='Моноблоки';
        $return['countrecords']=0;
        $i=0;
        
        require_once('config.php');
        $pdo = new PDO($dsn, $user, $password);

        //Begin form validation functionality
        if (!isset($subcategoryflag) || empty($subcategoryflag)){
            $return['error'] = true;
            $return['msg'] .= '<li>Error: Field1 is empty.</li>';
        }
        if ((!$return['error']) && $subcategoryflag=='Моноблоки'){
            $return['msg'] ='ChangePagePart';
        }
        $sql='SELECT * FROM monoblocks';
            $query=$pdo->prepare($sql);
            $query->execute();
            $return['outputtext']='<div style="width: 100%; border: 2px solid #e31235">';
                        
            while ($example=$query->fetch(PDO::FETCH_ASSOC))
            {
                // $return['querycontent']='<div style="width: 100%; border: 2px solid red"></div>';
                // $return['outputtext'].='<div class="ProductCardBlock">';
                
                $varbuffer=$example['screendiagonal_id'];
                $screendiagonalsql='SELECT screendiagonalvalue as screendiagonalvalue FROM screendiagonal WHERE id='.$varbuffer;
                $screendiagonalquery=$pdo->prepare($screendiagonalsql);
                $screendiagonalquery->execute();
                $examplescreendiagonal=$screendiagonalquery->fetch(PDO::FETCH_ASSOC)['screendiagonalvalue'];
                
                $varbufferformonoblocksid=$example['goods_id'];
                $fullnamemonoblocksql='SELECT name as name FROM goods WHERE id='.$varbufferformonoblocksid;
                $screendiagonalquery1=$pdo->prepare($fullnamemonoblocksql);
                $screendiagonalquery1->execute();
                $itemscreendiagonal=$screendiagonalquery1->fetch(PDO::FETCH_ASSOC)['name'];
                
                $sqloutput[$i]['screendiagonal']=ltrim(explode(',',$itemscreendiagonal)[1], ' ');
                
                $imagepathsql='SELECT id, path_to_image as path FROM monoblock_images WHERE id='.$example['image_id'];
                $imagepathquery=$pdo->prepare($imagepathsql);
                $imagepathquery->execute();
                
                $imagepath=$imagepathquery->fetch(PDO::FETCH_ASSOC)['path'];
                $sqloutput[$i]['imagepath']=$imagepath;
                
                $sqloutput[$i]['monoblockname']=explode(',',$itemscreendiagonal)[0];
                
                $bodycolorsql='SELECT name as name FROM mainbodycolor WHERE id='.$example['bodycolor_id'];
                $bodycolorquery=$pdo->prepare($bodycolorsql);
                $bodycolorquery->execute();
                
                $bodycolor=$bodycolorquery->fetch(PDO::FETCH_ASSOC)['name'];
                $sqloutput[$i]['color']=$bodycolor;
                
                
                $screenresolutionsql='SELECT resolution as resolution FROM screenresolution WHERE id='.$example['screenresolution_id'];
                $screenresolutionquery=$pdo->prepare($screenresolutionsql);
                $screenresolutionquery->execute();
                
                $screenresolution=$screenresolutionquery->fetch(PDO::FETCH_ASSOC)['resolution'];
                $sqloutput[$i]['resolution']=$screenresolution;
                
                $cputypesql='SELECT name as name FROM goods WHERE id='.$example['goods_id'];
                $cputypequery=$pdo->prepare($cputypesql);
                $cputypequery->execute();
                $cputypeitem=$cputypequery->fetch(PDO::FETCH_ASSOC)['name'];
                
                $sqloutput[$i]['cputype']=ltrim(explode(',',$cputypeitem)[2],' ');
                
                $cpufrequencyidsql='SELECT frequencyvalue as frequency FROM cpufrequency WHERE id='.$example['frequency_id'];
                
                $cpufrequencyidquery=$pdo->prepare($cpufrequencyidsql);
                $cpufrequencyidquery->execute();
                
                $cpufrequency = $cpufrequencyidquery->fetch(PDO::FETCH_ASSOC)['frequency'];
                $sqloutput[$i]['frequency']=$cpufrequency;
                
                $ramsizesql='SELECT name as name FROM goods WHERE id='.$example['goods_id'];
                $ramsizequery=$pdo->prepare($ramsizesql);
                $ramsizequery->execute();
                $ramsize=$ramsizequery->fetch(PDO::FETCH_ASSOC)['name'];
                
                $sqloutput[$i]['ramsize']=ltrim(explode(',',$ramsize)[3],' ');                  

                $videocardsql='SELECT name as name FROM goods WHERE id='.$example['goods_id'];
                $videocardquery=$pdo->prepare($videocardsql);
                $videocardquery->execute();
                $videocard=$videocardquery->fetch(PDO::FETCH_ASSOC)['name'];
                
                $sqloutput[$i]['videocard']=ltrim(explode(',',$ramsize)[5],' ');                    
                
                $sizememorydatasql='SELECT name as name FROM goods WHERE id='.$example['goods_id'];
                $sizememorydataquery=$pdo->prepare($sizememorydatasql);
                $sizememorydataquery->execute();
                $sizememorydataitem=$sizememorydataquery->fetch(PDO::FETCH_ASSOC)['name'];
                $sizememorydata = explode(',',$sizememorydataitem)[4];
                
                if (endsWith($sizememorydata, 'SSD')) {
                    $sqloutput[$i]['sizememorydata']=trim(substr($sizememorydata,0,strlen($sizememorydata)-strlen('SSD')),' ');
                    $sqloutput[$i]['memorytype']='SSD';
                }
                else {
                    $sqloutput[$i]['sizememorydata']=trim($sizememorydata,' ');
                    $sqloutput[$i]['memorytype']='HDD';                     
                };
                
                $pricesql='SELECT price as price FROM goods WHERE id='.$example['goods_id'];
                $pricequery=$pdo->prepare($pricesql);
                $pricequery->execute();
                $price=$pricequery->fetch(PDO::FETCH_ASSOC)['price'];
                
                $sqloutput[$i]['price']=$price;
                
                
                // $sqloutput[$i]['screendiagonal']=$example['screendiagonal_id'];
                
                $i+=1;
                
                // $return['outputtext'].='</div>';
            };
            
            $return['outputtext'].='</div>';
            $sqlcountrecords = 'SELECT COUNT(*) as count FROM monoblocks';
            $querycountrecords=$pdo->prepare($sqlcountrecords);
            $querycountrecords->execute();
            $return['countrecords']=$querycountrecords->fetch(PDO::FETCH_ASSOC)['count'];
                    

        //Return json encoded results
        return json_encode([
                            'result' => $return,
                            'output' => $sqloutput
                           ]
        );
    }

}

$ajaxValidate = new ajaxValidate;
echo $ajaxValidate->formValidate();
?>

а именно в правую часть .rightmenu добавлялось содержимое и функция displayProductItems(data) в центральную часть добавляла содержимое. Этот код был приведен для примера - подойдут любые изменения новой страницы. Кроме перехода на вышеуказанную страницу, должно происходить и изменение этой страницы, т. е. гиперссылка не только открывает новую страницу, но и меняет её содержимое.

Уточнение: Элемент с id="monoblocks" и элемент с классом .rightmenu находятся на одной и той же странице ../html/testsite.html (все элементы находятся на одной и той же странице).

Answer 1

Код, который Вы привели, выполняется на той странице, где находится ссылка (селектор неправильный, достаточно $('#monoblocks')). На этой странице новой страницы еще нет, а на новой странице - этой ссылки (и кода, который навешен на ее события) уже нет. Поэтому код изменения новой страницы должен находиться на новой странице, и туда нужно сообщить о необходимости что-то сделать.

localStorage или
добавление данных в QueryString той страницы, куда Вам надо перейти,
выполнить действия на новой странице

БЛОГ НА HUSL

Добавление функциональности к гиперссылке

Ответы (1 шт):