I have a navigation menu which is made up of several dropdowns. The menu is a bootstrap navigation menu. Each link goes to the same page. The next page "/page" has several other links. When the user clicks on the nav link and the next page is loaded i want it to automatically click a link on that page with a specific href attribute. Here is what i got so far but no lucky...
Jquery
$(document).on('click', '.link-1', function(){
$('a[href="#1485519100309"]').click();
});
HTML Part of the bootsrap NavBar
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="http:/#">Title<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>
<a class="link-1" href="http://myurlhere/page">Tab Link 1</a>
</li>
<li>
<a class="link-2" href="http://myurlhere/page">Tab Link 2</a>
</li>
<li>
<a class="link-3" href="http://myurlhere/page">Tab Link 3</a>
</li>
<li>
<a class="link-4" href="http://myurlhere/page">Tab Link 4</a>
</li>
</ul>
Using class:
$(".link-1").trigger('click');
or
$("a[href='href-link']").trigger('click');
Related
I have 2 html files
index.html and services.html
On services.html I have
<a class="nav-link" data-bs-toggle="tab" href="#ds-tab">Data Science</a>
<a class="nav-link" data-bs-toggle="tab" href="#ai-tab">AI</a>
<div class="tab" id="ds-tab">
<p>DS section </p>
</div>
<div class="tab" id="ai-tab">
<p>AI section </p>
</div>
It works fine on services.html
But if I am on index.html and I have a link as
AI Section
It doesnt work it just navigates to the page but doesnt show the div I am refering to.
I tried doing something like this but it doesnt work too.
<a data-bs-toggle="tab" href="services.html#ai-tab">AI</a>
Add a data-target attribute to the AI Section link, and set it to the id of the ai-tab div:
<a data-target="#ai-tab" href="services.html">AI Section</a>
I fail to understand why href is not working on a tag for data-toggle="dropdown" . When I hit the Lists tab, i should be routed to the google website.
FIDDLE HERE
Simple HTML:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
From Bootstrap documentation (http://getbootstrap.com/javascript/#dropdowns):
To keep URLs intact with link buttons, use the data-target attribute
instead of href="#".
So your code should be
<a data-target="http://www.google.es" target="_blank" href="http://www.google.es" class="btn btn-default dropdown-toggle">Lists</a>
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
Futhermore, you can find more information about how to get menu dropdown using hover instead of click: How to make twitter bootstrap menu dropdown on hover rather than click
A simple jQuery solution:
$('#menu-main > li > .dropdown-toggle').click(function () {
window.location = $(this).attr('href');
});
But the better solution is to replace the data-toggle attribute with data-hover
So your final code will be:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
Remove: data-toggle="dropdown"
It's work for me.
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>
I am using Bootstrap Treeview from my ASP.NET master page. Please see the sample code below. This code is in a Master page. The treeview is losing its state when going to a child page (for example, Page5). The menu gets collapsed.
What would be the best way to keep the respective treeview expanded? For example, when I go to Page 3, I want to have the secondMenuli expanded.
NOTE: I tried it without master page and it works perfectly, but I was looking to solve it using the master page.
<ul id="leftmenulist" class="sidebar-menu">
<li id="firstMenuli" class="active">
<a href="Home.aspx">
<span>Home</span>
</a>
</li>
<li id="secondMenuli" class="treeview">
<a href="#">
<span>Second Menu</span>
</a>
<ul class="treeview-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<li id="thirdMenuli" class="treeview">
<a href="#">
<span>Third Menu</span>
</a>
<ul class="treeview-menu">
<li>Page4</li>
<li>Page5</li>
<li>Page6</li>
</ul>
</li>
</ul>
If I setup a Master page to display a header similar to the following
<ul class="nav nav-pills nav-main" id="mainMenu">
<li>
<a class="dropdown-toggle" href="default.aspx">Home</a>
</li>
<li>
About Us
</li>
</ul>
I want to set the element active for the current page the user is on so in html it will look like this if default.aspx is the active page.
<ul class="nav nav-pills nav-main" id="mainMenu">
<li class="dropdown active"> <%--active--%>
<a class="dropdown-toggle" href="default.aspx">Home</a>
</li>
<li>
About Us
</li>
</ul>
The header menu is based on an existing template so is all html with CSS styling and does not contain any asp: controls. I know I can do this in codebehind by setting the attributes but most of the searches I've pulled up say there could be a better way or here's a dirty workaround link1 & link2
What would be the best way(s) of doing this?
First you have to set all li tags as server Controls
<ul class="nav nav-pills nav-main" id="mainMenu">
<li>
<a class="dropdown-toggle" href="default.aspx" runat="server" id="lidefault">Home</a>
</li>
<li>
About Us
</li>
</ul>
do like the above for all li tags
Then in master page load,
string sURL=Request.Url.ToString().ToLower();
if (sURL.Contains("/default.aspx")
lidefault.Attributes.Add("class", "active")
else if (sURL.Contains("/about.aspx")
liabout.Attributes.Add("class", "active")
// do like the above for the rest li tags
You can check it with javascript. Set a foreach loop for check each link of your menu. If your menu url equal the page url, add active class with .addClass() method.