I want to give a link for nav-tabs from another page. I mean to say that, I want to access nav-tabs from another page. I will give you the detailed information about it.
On my website there are two pages one is index.html page and another is a business-listing.html. In business-listing page I used nav-tabs. And I want to access these tabs from index.html page.
Give some idea how to give a link.
The code is too long, so I can't put it here.
I'm trying this code to give a link Link to Tab1, but it can't work.
You'd need to write some JavaScript code to make this work. The tab switching occurs when you click on a navbar link. Something like:
$(function () {
var tabId = window.location.hash;
$("#yourTabUl").find('a[href=' + tabId + ']').tab('show');
});
Replace yourTabUl with the ìd of your ul-element of the TabLinks. (Create an id if needed)
Also see the documentation here: https://getbootstrap.com/javascript/#tabs
Related
I have a site with menu tabs: Home, About, Work, Contact.
I'm using anchor tags for this one-page navigation.
But I don't want my url to update to something like this - http://example.com/#about or ../#work ..
I just want simply the default url on the address bar (http://example.com/) whenever I click on the menu tabs and jump to different sections of that one page.
I don't want to update the address bar.
How can I do that?
Thank you so much!
set id for each your container of pages (about,work etc.) then set href like this
About
then use this function
<script type="text/javascript">
function myscroll(myID){
var offset = jQuery("#"+myID).offset()
window.scrollTo(0,offset.top);
}
</script>
You have to use javascript in order to achieve that. Im not sure you can do it without changing the url, but there is : a nice way to do it.
If you really dont want your url to change, check this post
I want to know how in this web site, when I hover the mouse over report ad of the page, it show the link as ....com/***/***#report-item, but when I click on it, it shows me a pop-up. but still the original URL is not changing to ....com/***/***#report-item?
I checked the source of the page, and it shows the link code as:
<span><i class='ico-report'></i>Report Ad</span>.
That is because they prevent the browser from doing what it is meant to do (default event).
Here is the JavaScript code for that:
event.preventDefault();
You can include that inside the element, something like
Link
And inside the function, add that code. It would prevent the default function; that is to change the URL.
Maybe they're using jQuery for that because I can't see any sort of onclick="" inside the element. So what they might be doing would be this:
Generate Report
and the jQuery code would be as:
$('a.report').click(function () {
event.preventDefault(); // prevent the default function of the hyperlink
/* show the pop up */
});
This way, the website is preventing the default function and is using that link to do some other function.
Here is a fiddle for that: http://jsfiddle.net/afzaal_ahmad_zeeshan/3zPd6/
To get the Elements Attribute
To get the element's attribute in JavaScript you use the following code
document.getElementById("hyperlinkId").href;
This would get you the href of the hyperlink. And you can reference it in your call.
I´ve got a main page with a menu (with links to my sub-sites) and a div (where my sub-sites will appear). This is my home.asp
Then I have a folder 'sub-site1' with 2 pages (A.asp and B.asp) that have links between them.
When I click 'sub-site1' at the menu, the A.asp page appears in my div. But if I click in the B link (inside A.asp) the B.asp will open in a blank page.
link to A.asp (in home.asp):
sub-site1
link to B.asp (in A.asp):
B
also try with
B
Could anyone please help me in this.
It is very normal because your B link is in A.asp and the A.asp doesn't contain a frame whose name is div_id. You can try to put the B link in home.asp or use the jQuery .load function as Pete said.
<a id="clickThis" href="javascript:void(0);" target="div_id">B</a>
use jquery.load now
$(document).ready(function(){
$("#clickThis").click(function(){
$("#div_id").load("B.jsp");//this will load B.jsp inside div_id
//**in case you want to pass parameters to B.jsp**
$("#div_id").load("B.jsp",function(){
param1:value,
param2:value2
});
});
});
I'm writing an application, a reporter with heirarchy of folders and files, in the lower heirarchy level there are 2 types of reports: the simple one is a flat (non link) report that being presented as a single simple line.
the second type is a link with a general description in the header and if you press the link you get a full report.
example: if I run a telnet command, I will see the command in the header and if I want to see the entire session with the device I will press the link and it will be presented.
My problem is that most of this lined-files are small but the OS reserve a minimum space for every file so I loss alot of disk space for nothing.
The solution I want to implement is a "dummy" links, which will be presented and will behave like a regular links but actually will be stored in the same file like their "parent" (probably with alot of other links like them).
The solutions I saw so far are only for "jumping" inside a page but this is not what I'm looking for, I want it to be presented like a seperated file and I dont want the "parent" file to present this information at all (the only way to see it will be by pressing the link and even then it will present only this information and not the other file content).
any idea guys?
To link to a specific part in a web page, place an anchor link where you want the user to go to when they click a link with:
<a name="anchor"></a>
and link to it with:
Click here
You can replace "anchor" with a more descriptive name if needed.
To hide/show a div (the following code is untested, but should work)
JQuery solution (If you're using JQuery):
function toggle(divname) {
$(divname).toggle();
}
The corresponding HTML:
<div id="content">some content</div>
<a onclick="toggle('content')">Click here to show/hide the content div!</a>
Non-JQuery Solution:
function toggle(divname) {
var adiv = document.getElementById(divname);
if (adiv.style.display === 'block' || adiv.style.display === '') {
adiv.style.display = 'none';
} else {
adiv.style.display = 'block'
}
}
The HTML:
<div style="display:hidden" id="content">Content</div>
<a onclick="toggle('content')">Click here to show/hide the content div!</a>
How to make tabs on the web page so that when click is performed on the tab, the tab gets css changed, but on the click page is also reloaded and the css is back to original.
dont use the jquery :D
all of what you needs a container, a contained data in a varable and the tabs
the container is the victim of the css changes.
the tabs will trigger the changing process.
if you have a static content, you can write this into a string, and simply load it from thiss.
if you have a dinamically generated content, you need to create ajax request to get the fresh content, and then store it in the same string waiting for load.
with the tabs you sould create a general functionusable for content loading.
function load(data) {
document.getElementById("victim").innerHTML = data;
}
function changeCss(element) {
//redoing all changes
document.getElementById("tab1").style.background="#fff";
document.getElementById("tab2").style.background="#fff";
element.style.background = "#f0f";
}
with static content the triggers:
document.getElementById("tab1").onclick = function() {load("static data 1");changeCss(document.getElementById("tab1"))};
document.getElementById("tab2").onclick = function() {load("static data 2");changeCss(document.getElementById("tab2"))};
if you want to change the css, you need another function which do the changes.
i tell you dont use the jquery because you will not know what are you doing.
but thiss whole code can be replaced by jquery like this:
$("tab1").click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 1");
});
$("tab12click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 2");
});
if you know how javascript works then there is noting wrong with the jquery, but i see there is more and more people who just want to do their website very fast and simple, but not knowing what are they doing and running into the same problem again and again.
Jquery UI Tabs:
http://jqueryui.com/demos/tabs/
Have a <A href tag around the "tab" and use onClick to fire some Javascript that changes the CSS.
If you do not want use Jquery for creating of UI tabs, please see my cross-browser JavaScript code: GitHub.
You can use different ways to create tabs and tab content.
Tab content can added only when tab gets focus.
You can remember selected tab. Selected tab opens immediatelly after opening of the page.
You can create tabs inside tab.
Custom background of the tab is available.
Example: Tabs