We Keep Coding

onclick button redirect with variable on same page?

First off, I'm quite new to HTML, CSS and JS and I've spent a long time trying to figure something out that may be relatively basic, so I'd appreciate any advice (or a link to a similar question already asked).
I've been building a B2B website for my employer where each logged in client needs to be able to access different content on one specific navbar menu item. This menu button could lead to any of 5 different resources (PDF documents via a URL) depending on specific parameters unique to each client.
I've managed to create unique files that reference back to the DOM for each client dependent on their log-in credentials, however I am unable to embed this into the Menu button. On a side note, this website queries back to our SQL database.
Menu Bar:
<ul style="">
<li style="">
<a class="menulinks currentItem" style="" href="xxx.aspx">
Agent Area
</a>
</li>
<li style="display:none;">
<a class="menuHeader " style="display:none;" href="xxy.aspx" aria-haspopup="true">
Bookings
</a>
<ul>
<li class="menulinks subItem" style="display:none;">
<a class="menulinks subItem " style="display:none;" href="xxxz.aspx">
Online Bookings</a>
</li>
<li class="menulinks subItem" style="display:none;">
<a class="menulinks subItem " style="display:none;" href="xxxu.aspx?dummy=-1">
List Bookings</a>
</li>
<li class="menulinks subItem disabled" style="display:none;">
<a class="menulinks subItem disabled " style="display:none;" href="javascript:confirmNewBooking('', 'zxcv.aspx')" onclick="javascript: return false;">
New Quote</a>
</li>
<li class="menulinks subItem disabled" style="display:none;">
<a class="menulinks subItem disabled " style="display:none;" href="ViewBooking.aspx?bookingId=-1" onclick="javascript: return false;">
This Booking</a>
</li>
</ul>
</li>
<li style="display:none;">
<a class="menulinks " style="display:none;" href="yut.aspx">
Online Tariff
</a>
</li>
<li style="display:none;">
<a class="menulinks " style="display:none;" href="PTF.aspx">
FIT Tariffs
</a>
</li>
<li style="display:none;">
<a class="menulinks " style="display:none;" href="qwert.aspx">
Product Search
</a>
</li>
<li style="display:none;">
<a class="menulinks " style="display:none;" href="tyyu.aspx">
Availability
</a>
</li>
<li style="display:none;">
<a class="menulinks " style="display:none;" href="asdf.aspx">
Tours & Packages
</a>
</li>
<li style="display:none;">
<a class="menuHeader " style="display:none;" href="zxcv.aspx" aria-haspopup="true">
My Account
</a>
<ul>
<li class="menulinks subItem" style="display:none;">
<a class="menulinks subItem " style="display:none;" href="qazx.aspx">
User Accounts</a>
</li>
</ul>
</li>
<li style="">
<a class="menulinks " style="" href="URL target="_blank">
Portfolio
</a>
</li>
<li style="">
<a class="menulinks " style="" href="**UNIQUE VARIABLE TARGET**" target="_blank">
Rates & info
</a>
</li>
</ul>
The unique variable needs to be placed in the final menu item, however it's sitting in div class elsewhere.. The variable resource shows up in H1 but I am simply unable to move it to the menu item. The problem is that each resource is linked to a specific user specific file, so any changes would need to be done in that file. Here is an example of the separate files:
<h1 class="title">Download your confidential STO Rates</h1>Rates and Information
The header of the document links back to our SQL server, where each user is assigned a specific code.
What I would like is one of the two:
1.) Since the variables are that the URL displayed in these files in H1 currently could be one of 5, what JS can I use to retrieve a URL in another div and post it to the menu item? The resources are URL's going to another resource and only have 5 different endings #. I"m assuming it's an onlick event but I'm not very good at JS to be honest and uncertain.
2.) Alternatively, I can output try to configure the separate client files to be part of the menu item ideally, but I'm not certain how to do this.
Again, I'm very new at this so any advice would be really helpful. Post COVID our industry has forced us to learn things we normally wouldn't have during the normal course of events!
Thanks so much
-

Swap <div> content from pure css menu

I'm trying to fix my jquery issue where I swap content from separate html pages stored in multiple sub folders. My menu has over 100 link items that I need to work with on my site. Links 1-4 work well and swap without issue but any beyond that cease to function. The initial code I sourced off the net. Just not sure why it's not working fully as I need all 100+ links active. Any help would be much appreciated and thanks in advance.
The below code is part of the CSS menu. link1, link2, link3, and link4 all work as they should but beyond that nothing seems to function.
<ul>
<li>
<a id="link1" href="#" onmouseover="roll('but1', 'images/blueeye/blueeye_b1_over.png')" onmouseout="roll('but1', 'images/blueeye/blueeye_b1.png')">
<img alt="Home" src="images/blueeye/blueeye_b1.png" name="but1" class="style3" /></a>
</li>
<li>
<a href="javascript:vold(0)" onmouseover="roll('but2', 'images/blueeye/blueeye_b2_over.png')" onmouseout="roll('but2', 'images/blueeye/blueeye_b2.png')">
<img alt="Worship Programs" src="images/blueeye/blueeye_b2.png" name="but2" class="style3" /></a>
<ul style="width: 170px">
<li><a id="link2" href="#">Our Worship Program</a></li>
<li><a id="link3" href="#">Sabbath School</a></li>
<li><a id="link4" href="#">Divine Service</a></li>
</ul>
</li>
<li>
<a href="javascript:vold(0)" onmouseover="roll('but3', 'images/blueeye/blueeye_b3_over.png')" onmouseout="roll('but3', 'images/blueeye/blueeye_b3.png')">
<img alt="Sabbath School" src="images/blueeye/blueeye_b3.png" name="but3" class="style3" /></a>
<ul style="width: 160px">
<li><a id="link5" href="#">Current Lesson</a></li>
<li><a id="link6" href="#">Mission Story</a></li>
<li><a id="link7" href="#">Adult Lessons</a></li>
<li><a id="link8" href="#">PowerPoint Helps</a></li>
<li><a id="link9" href="#">Picture Memory Verses</a></li>
</ul>
</li>
</ul>
The below javascript is the swapping. As stated above link1-link4 all function but link5 onwards doesn't.
Code begins here:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#link1").click(function(){$("#site_content").load("homepage.htm");});
$("#link2").click(function(){$("#site_content").load("about/worship-program.htm");});
$("#link3").click(function(){$("#site_content").load("about/ss_worship.htm");});
$("#link4").click(function(){$("#site_content").load("about/div_worship.htm");});
$("#link5").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-current.htm");});
$("#link6").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-mission-story.htm");});
$("#link7").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pdf.htm");});
$("#link8").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pptx.htm");});
$("#link9").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-memory-verse.htm");});
$("#link10").click(function()$("#site_content").load("kjv_bible/kjv_bible.htm");});
$("#link11").click(function(){$("#site_content").load("");});
$("#link12").click(function(){$("#site_content").load("");});
$("#link13").click(function(){$("#site_content").load("");});
$("#link14").click(function(){$("#site_content").load("");});
</script>

please check that #site_content_ss exists,
unexpected identifier
this part:
$("#link10").click(function()$("#site_content").load("kjv_bible/kjv_bible.htm");});
should be this:
$("#link10").click(function(){$("#site_content").load("kjv_bible/kjv_bible.htm");});
I'd create a example https://jsbin.com/muvoyuredu/edit?html,js,output
UPDATE
if you would to swap content into #site_content
$("#link5").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-current.htm");});
$("#link6").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-mission-story.htm");});
$("#link7").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pdf.htm");});
$("#link8").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pptx.htm");});
$("#link9").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-memory-verse.htm");});
should be this:
$("#link5").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-current.htm");});
$("#link6").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-mission-story.htm");});
$("#link7").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-pdf.htm");});
$("#link8").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-pptx.htm");});
$("#link9").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-memory-verse.htm");});
if you want stay on selected div block on refresh
href # change to #id (e.g. href="#link1" )
get id in the query string than auto click this link
I'd create a example https://jsbin.com/cocuvaraqu/edit?html,js,output

Close off-canvas mobile menu when link is clicked (JS)

I have a mobile menu that has some anchored links that scroll to a certain section of the page when clicked. The problem with this is when I click one of these links, due to the fact that a new page is not loading, the menu remains open.
I wish to implement a solution whereby if one of these links are clicked, the menu closes by default. I have tried to hide the menu on click using JS but I think my logic may be wrong. Any help would be great.
Here is the code for my menu.
<div id="my-id" class="uk-offcanvas custom_canvas">
<div class="uk-offcanvas-bar">
<div class="uk-panel">
<a class="btn btn primary remove_image-div" onclick="UIkit.offcanvas.hide([force = false]);">
<img src="img/remove_icon.png" class="remove_image" alt="remove">
</a>
<ul class="mm-list mm-panel mm-opened mm-subopened" id="mm-0">
<li class="offcanvas_li">
<a class="offcanvas_open" title="Samples" href="index.html#sample-section">Samples</a>
</li>
<li class="offcanvas_li">
Packages
</li>
<li class="offcanvas_li">
About
</li>
<li class="offcanvas_li">
Contact
</li>
<li class="offcanvas_li">
Blog
</li>
<li class="offcanvas_li">
<a class="offcanvas_open" title="We Love" href="we_love.html">We Love</a>
</li>
</ul>
</div>
</div>
</div>

I'm not familiar with UIkit.offcanvas plugin but with a little sense I can answer you that you can add them (the links) all the attribute onclick="UIkit.offcanvas.hide([force = false]);"
A better (generic) solution is to "listen" to their click event, then, run offcanvas command.
Something like:
$('.offcanvas_li a').click(function() {
UIkit.offcanvas.hide([force = false]);
});

This works
<script>
function myFunction() {
UIkit.offcanvas.hide([force = false])
}</script>
<button onclick="myFunction()">Close Panel</button>

How to use a link with different url on diffrent page

I have these links
<li class=" ">Who are we </li>
<li class=" ">How it Works </li>
<li class=" ">What to expect</li>
My home page url is abcd.com
Home page have some data according to # tag. The # show a scroll down only for home page. when i click on any link then url change in abcd.com/#who-are-we and scroller point that section on home page,
But i want one thing.
When i will go on any other page as like products page or contact us page then the click action of these links go on about us page. Will you please tell me how can i set a conndition for url in php

You should look at the difference between named Anchors and links to other pages.
You can combine the page AND the named anchor like this:
go to contact page to anchor ABC
Here an example:
named-anchors: first 3 <a href>'s point to a location in this document
links: other 2 <a href>'s point to other pages...
That should do the trick.
<ul>
<li>About us:
<ul>
<li class=" ">Who are we </li>
<li class=" ">How it Works </li>
<li class=" ">What to expect</li>
</ul>
</li>
<li>Contact Page</li>
<li>Products Page</li>
</ul>
<a name="who-are-we">
<h2>Who are we</h2>
<p>Blah<br>blah<br>blaah<br>...</p>
<a name="how-it-works">
<h2>how-it-works</h2>
<p>Blah<br>blah<br>blaah<br>...</p>
<a name="what-to-expect">
<h2>what-to-expect</h2>
<p>Blah<br>blah<br>blaah<br>...</p>

Can you change a link title by named title attribute?

I'm trying to figure out if it's possible (and if so how) to change a link's color by polling the title attribute. I'm working with an HTML page that is generated from another script that creates a accordion list of hyperlinks. A couple of those hyperlinks I'd like to highlight, and I believe I can shoehorn in some JavaScript to do this (and the title attribute is the only unique element I can rely on), but I'm not sure how to write it. Here's what a bit of the list page looks like:
<div class="AccordionPanel AccordionPanelOpen">
<div class="AccordionPanelTab">
Forms
</div>
<div class="AccordionPanelContent" style="height: auto; display: block;">
<ul class="arrows searchSubtype">
<li class="">
<a title="Form-1.doc" target="_top" href="../Form-1.doc">
Form 1
</a>
</li>
<li class="">
<a title="Form-2.doc" target="_top" href="../Form-2.doc">
Form 2
</a>
</li>
<li class="">
<a title="Form-3.doc" target="_top" href="../Form-3.doc">
Form 3
</a>
</li>
<li class="">
<a title="Form-4.docx" target="_top" href="../Form-4.docx">
Form 4
</a>
</li>
</ul>
</div>
</div>

Sure, use the attribute selector:
$("a[title='Form-4.docx']").css("color","red");