I'm trying to create a link to an id tag wich is inside a dropdown menu and is placed on another page.
<a href=index.html#test>link to id tag on another page</a>
The problem is when I click the link it goes to the right page but not shows the content because it is inside a collapsed dropdown bootstrap menu
<ul class="dropdown-menu">
<li><a class="chapter" href="01-primaria.html">
<div class="img-menu">
<img class="img-responsive" src="img/01-primaria.png">
</div>
<div class="titleChapter test">
<strong>01.</strong>
<br>
Vuestro hijo está en Educación Primaria
<small>Victoria Urzáiz Celigueta</small>
</div>
</a></li>
</ul>
I need to deploy the right menu when the link is clicked (I will have more than one menu).
Any clue?
Thanks!
Try calling a JS function that displays the intended page inside an iframe or a division when the items from the drop down list are chosen.
Eg: JS Function
function loadPage(){
document.getElementById("divisionID").innerHTML='<object type="text/html" data="01-primaria.html" ></object>';
}
HTML Page:
Create a division of the above name and leave it empty. So when your list item is clicked(onclick()) or when the selected item is changed (onchange()) call the JS function instead of referring to the page itself.
<li><a class="chapter" onchange="loadPage()">
Hope this helps
Related
I'm creating my portfolio website and I'm having some issues with any anchor tag within my navigation. When I hover over the link, it appears correctly, but nothing happens when I click on it. Both html pages are in the same folder (although I'm not getting a typical page not found error anyway). Here is an example of a link the the homepage through the logo:
<a class="navbar-brand" href="index.html" style="padding-top:2px;">
<img src="logo.svg" alt="" width="190px" style="padding:0px"/>
</a>
Here is another example within the menu, where I'm linking to the use-cases section of in the homepage:
<ul class="nav navbar-nav navbar-right">
<li>CASE STUDIES</li>
</ul>
UPDATE:
The issue was being caused by an event listener that changes the default behavior of the code. In this case I was using the following event listener:
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
I am trying to develop a dropdown data toggle, that can be used to open a dropdown-menu but simultaneously allows the user to click a link.
Currently, the link can only be opened via right-click "open in new tab". However, a left-click on the link always opens the dropdown, even though the browser recognizes the target of my link properly (I can see the target url in the bottom left of my browser).
I Already tried split-buttons, but their layout is not flexible enough.
Basically, I need one button (dropdown-toggle) with two lines.
The first line is an anchor with a link name and an url.
The second line is the actual label of the button.
(Background: When the user selects a new item from the dropdown, the displayed link and button label are updated by angular.)
<div class="btn dropdown-toggle" data-toggle="dropdown">
<a href="{{someUrl}}" class="button-link">
{{link name}}
</a>
<div class="button-label">
{{label}}
</div>
</div>
<ul class="dropdown-menu">
<li ng-repeat="item in items"> item </li>
</ul>
Expected result:
* If the user clicks on the link, I would like to load the linked page.
* If the user clicks somewhere else on the button (no matter whether its first or second line), I would like to open the dropdown menu.
However, a left-click on the link always opens the dropdown,
The <a> tag needs a click handler that stops propagation of the click:
<div class="btn dropdown-toggle" data-toggle="dropdown">
<a href="{{someUrl}}" class="button-link" ng-click="$event.stopPropagation()">
{{linkName}}
</a>
<div class="button-label">
{{label}}
</div>
</div>
This will prevent the click from bubbling to the <div> element that opens the dropdown.
For more information, see
MDN Web API Reference - Event.stopPropagation()
This is what I mean
I wish to link a button to show content relating to a certain div in a tab on another page, how can I do this using JQuery?
I have included a picture / drawing so that you can understand what I mean.
<div class="myTabs">
<ul class="tabs" data-tab data-options="deep_linking:true">
<li><a data-toggle="tab" href="#One">Tab 1</a></li>
<li><a data-toggle="tab" href="#Two">Tab 2</a></li>
</ul>
</div>
<div class="tabContent">
<div id="One">This is the content in div one on Tab 1</div>
<div id="AnotherOne">This is the content is second div on Tab 1</div>
</div>
So two.html has a button that must link directly to show content in one.html, Tab 1, div One & the second button must link to one.html, Tab 1, second div, i.e.'AnotherOne'
You could add a hash value to the link on two.html and add a startup script to the page with the tabs to show/hide the div that you need.
<a href='/two.html#one'>BUTTON ONE</a>
<a href='/two.html#two'>BUTTON TWO</a>
On one.html you can add a startup script that sets the visibility of the correct div. If your tab contains two divs like this (Everything hidden by default?):
<div class='one' style='display:none;'>div one</div>
<div class='two' style='display:none;'>div two</div>
You can add the following startup script to two.html:
<script>
$(document).ready(function() {
// If the location is empty show the content of div one?
var tab = window.location.hash ?? 'one';
$('div.' + tab).show()
});
</script>
The best way you can do is using anchor tag.If you are using button wrap it by a anchor tag.
Here is the code.
<button>Jump</button>
Here my site: viettech-ca. com
My codes:
<div class="wrap footer-nav mgt35">
<ul>
<li>Về chúng tôi</li>
<li>Đại lý</li>
<li>Liên hệ</li>
<li>Điều kiện & Điều khoản</li>
<!-- <li>--><!--</li>--></ul>
<div><a class="go-top" href="#">Lên đầu trang</a></div>
</div>
go-top works, but it redirected me to the top of the homepage instead of the top of the current page.. Please show problem
since you also have javascript:
JS:
function scroll2Top(){
scroll(0,0);
}
HTML
<a class="go-top" onclick="scroll2Top();return false;">Lên đầu trang</a>
I'm assuming you want to set up a 'Go to top' link in your page that takes the user back to the top of the page.
You do this with anchor tags where you would usually define it at the top of your code and then reference to it when required.
Code at top of html:
<body>
<a name="top"></a>
...
Then your 'href' link would be as follows:
<div><a class="go-top" href="#top">Lên đầu trang</a></div>
If you leave out the top anchor name (name="top") it will still work, but this is bad practice because whats happening is that the page can't find the '#top' reference, it scrolls to the top anyway but because is can't find the link.
I have a list of menus as below, every menu link is an anchor. I am experiencing a very strange behaviour from anchor tag i.e., when I click on any menu it opens the requested page correctly. But on second click system duplicates the directory hierarchy and looks for the requested page where hierarchy does not exist. For example there is a page on path "Pages/Contact/test.aspx", 1st click opens the page. When user clicks 2nd time browser tries to open a page at path "Pages/Contact/Pages/Contact/test.aspx" resulting in exception "The resource cannot be found" error is thrown.
<div id="menu">
<ul class="menu">
<li><span>About Us</span>
<div>
<ul>
<li><a href="Pages/Contact/Phone.aspx" ><span>Phone</span></a></li>
<li><a href="Pages/Contact/Email.aspx" ><span>Email</span></a></li>
</ul>
</div>
</li>
</ul>
</div>
The problem is because you are using relative paths to your pages.
It works the first time because (I assume) you are in the root directory. So clicking the link takes you to 'Pages/Contact/Phone.aspx'. When in phone.aspx, if you click the link again, it looks for this page: Pages/Contact/Pages/Contact/Phone.aspx.
You need to add a / to the beginning of your URL to make it relative to the root of the site:
<ul>
<li><a href="/Pages/Contact/Phone.aspx" ><span>Phone</span></a></li>
<li><a href="/Pages/Contact/Email.aspx" ><span>Email</span></a></li>
</ul>
Or alternatively, because you're using ASP.Net, you can use the ResolveUrl() function to ensure all your links are relative to the root of the solution:
<ul>
<li><span>Phone</span></li>
<li><span>Email</span></li>
</ul>
I believe href="" is your problem here.
Try href="#" or href="javascript:;"