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

user531234
November 29, 2022
164 views
0 votes
2 Answers

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 class="navbar">
        <div class="container">
            <a href="#" class="navbar-brand">BIOGRAHPY</a>
            <div class="navbar-wrap">
                <ul class="navbar-menu">
                    <li><button class="button1">About me</button></li>
                    <li><button class="button2">Portfolio</button></li>
                    <li><button class="button3">Place of study</button></li>
                </ul>
                <a href="#" class="contacts">Contacts</a>
            </div>
        </div>
    </nav>
    <div class="text1" id="option">
        <p>Test</p>
    </div>
    <!-- <div class="portfolio" id="option2">Тест2</div> -->
    <script type="text/javascript" src ="C:UsersadeniOneDriveDesktopsitejquery-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

Answers

- MDZand
- November 29, 2022 at 3:41 pm
- 0 votes
0
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])
Login or Signup to reply.

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 class="navbar">
  <div class="container">
    <a href="#" class="navbar-brand">BIOGRAHPY</a>
    <div class="navbar-wrap">
      <ul class="navbar-menu">
        <li><button class="button1" data-page="about.html">About me</button></li>
        <li><button class="button2" data-page="portfolio.html">Portfolio</button></li>
        <li><button class="button3" data-page="pts.html">Place of study</button></li>
      </ul>
      <a href="#" class="contacts">Contacts</a>
    </div>
  </div>
</nav>
<div class="text1" id="option">
  <p>Test</p>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.