How to open another html page in the same tab using Jquery-CodePudding

Please help me. I have a code in which I try to open another page, but when I click on the button nothing happens, the console is also empty, how can I solve this or maybe I have an error somewhere? P.S. I use Jquery HTML, JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Biograpy</title>

    <link rel="stylesheet" href="libs/bootstrap-reboot.min.css">

    <link rel="stylesheet" href="libs/bootstrap-grid.min.css">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/styles.css">
</head>
<body>

    <nav >
        <div >
            <a href="#" >BIOGRAHPY</a>
            <div >
                <ul >
                    <li><button >About me</button></li>
                    <li><button >Portfolio</button></li>
                    <li><button >Place of study</button></li>
                </ul>
                <a href="#" >Contacts</a>
            </div>
        </div>
    </nav>
    <div  id="option">
        <p>Test</p>
    </div>
    <!-- <div  id="option2">Тест2</div> -->
    <script type="text/javascript" src ="C:\Users\adeni\OneDrive\Desktop\site\jquery-3.6.1.min.js">
        $('button1').click(function(){
            window.location = $(this).find('.About_me').html();
        })  
    </script>
</body>
</html>

CSS

body {
    position: relative;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
    min-width: 320px;
    overflow-x: hidden;
    height: auto;
}
.navbar {
    width: 100%;
    height: 70px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, .1);
}
.navbar .container {
    height: inherit;
    display: flex;;
    justify-content: space-between;
    align-items: center;
}
.navbar-menu {
    list-style-type: none;
    padding-left: 0px;
    margin-bottom: 0px;
}
.navbar-menu li {
    display: inline-block;
}
.navbar-menu li button {
    border-radius: 60px;
    border: none;
    outline: none;
    display: inline-block;
    color: #000;
    opacity: .6;
    text-decoration: none;
    padding: 10px;
    transition: all .7s ease-in-out;
}
.navbar-menu li button:hover {
    opacity: 1;
}
.text1 {
    display: none;
}
.visible_block {
    display: flex;
}
.navbar-wrap {
    display: flex;
    flex-flow: row nowrap;
}
.contacts {
    margin-left: 25px;
    padding: 10px 30px;
    background-color: lightcoral;
    border-radius: 90px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(255, 127, 80, .2);
    transition: all .7s ease-in;
}
.contacts:hover {
    box-shadow: 0 9px 9px rgba(255, 127, 80, .5);
    transform: scale(1.050);
    color: #000;
}
.navbar-brand {
    font-weight: : 700;
    font-size: 26px;
    text-decoration: none;
    color: #000;
    transition: all .7s ease-out;
}
.navbar-brand:hover {
    color: lightcoral;
}

I tried to change the names that apply to classes, or to set types and ids at all, but it also did not lead to anything

CodePudding user response：

Welcome to stackoverflow. It seems that you are missing some basic points:

First Your reference tag to jQuery is wrong. Better to add jQuery or other js files whith relative address. For example put the file in the same folder as your html file and do this:

<script type="text/javascript" src ="jquery-3.6.1.min.js">
</script>

Second add another script tag:

<script type="text/javascript">
 $('.button1').click(function(){
            window.location.href = $(this).find('.About_me').html();
        }) 
</script>

Third Start addressing button one with a . (as the code above) while you are using it's class.

Fourth There is not tag with the class About_me so the code will not work. Also notice that the tag should contain the address of the page

Fifth if you want to redirect the page you should use window.location.href and not window.location. If you want to open a new window use window.open([address here])

CodePudding user response：

Assuming tour pages are www.misite.net/about.html, www.misite.net/portfolio.html, and so on:

$('.navbar-menu').find('button').on('click', function() {
  let page = $(this).data('page');
  let urlToOpen = window.location.origin   '/'   page;
  console.log(urlToOpen);
  window.location.replace(urlToOpen);
});

body {
  position: relative;
  font-family: 'Noto Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #000;
  min-width: 320px;
  overflow-x: hidden;
  height: auto;
}

.navbar {
  width: 100%;
  height: 70px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, .1);
}

.navbar .container {
  height: inherit;
  display: flex;
  ;
  justify-content: space-between;
  align-items: center;
}

.navbar-menu {
  list-style-type: none;
  padding-left: 0px;
  margin-bottom: 0px;
}

.navbar-menu li {
  display: inline-block;
}

.navbar-menu li button {
  border-radius: 60px;
  border: none;
  outline: none;
  display: inline-block;
  color: #000;
  opacity: .6;
  text-decoration: none;
  padding: 10px;
  transition: all .7s ease-in-out;
}

.navbar-menu li button:hover {
  opacity: 1;
}

.text1 {
  display: none;
}

.visible_block {
  display: flex;
}

.navbar-wrap {
  display: flex;
  flex-flow: row nowrap;
}

.contacts {
  margin-left: 25px;
  padding: 10px 30px;
  background-color: lightcoral;
  border-radius: 90px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(255, 127, 80, .2);
  transition: all .7s ease-in;
}

.contacts:hover {
  box-shadow: 0 9px 9px rgba(255, 127, 80, .5);
  transform: scale(1.050);
  color: #000;
}

.navbar-brand {
  font-weight: : 700;
  font-size: 26px;
  text-decoration: none;
  color: #000;
  transition: all .7s ease-out;
}

.navbar-brand:hover {
  color: lightcoral;
}

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<nav >
  <div >
    <a href="#" >BIOGRAHPY</a>
    <div >
      <ul >
        <li><button  data-page="about.html">About me</button></li>
        <li><button  data-page="portfolio.html">Portfolio</button></li>
        <li><button  data-page="pts.html">Place of study</button></li>
      </ul>
      <a href="#" >Contacts</a>
    </div>
  </div>
</nav>
<div  id="option">
  <p>Test</p>
</div>