有一個<a href=""> tag change another tags class with jquery

-1

Yet again kind of hard for me to explain but:有一個<a href=""> tag change another tags class with jquery

I have a navbar where i am using tabs instead of different pages, now in the body of the page i have a tag that says "Click Here" and when you click it, it takes you to the different tab. This works all good but what i want it to do is change the tab that its redirected you to, to make it active (as in add "active" class to the li tag) My Code: INDEX.HTML: https://codetidy.com/8755/ 感謝

來源

2016-07-29 Tom Dickson

<html> 
 
<head> 
 
<!-- Bootstrap CSS framework --> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"> 
 
<!-- Custom Styles --> 
 
<link href="css/style.css" rel="stylesheet"> 
 
<!-- Font-Awesome Icons --> 
 
<link href="css/font-awesome.css" rel="stylesheet"> 
 
<!-- JQuery JS --> 
 
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
 
<!-- Bootstrap JS Framework --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
</head> 
 

 
<body onLoad="move()"> 
 
<!-- If your using a mobile device this script will redirect you --> 
 
<style> 
 
\t #myTab li.active{background:#eeeeee;} 
 
</style> 
 

 
<script type="text/javascript"> 
 
<!-- 
 
if (screen.width <= 699) { 
 
document.location = "mobile.html"; 
 
} 
 
//--> 
 
</script> 
 
<!-- End redirection script --> 
 
<!-- When each item on the navbar is selected it will change the selected tab to an 
 
active tab so it will add the .active {} css and an active class to the li --> 
 
<script> 
 
    $(function() { 
 
    $('#myTab a:first').tab('show') 
 
    $('#myTab li:first').addClass('active') 
 
    }); 
 
</script> 
 
<!-- End Active Tabs --> 
 
<!-- Active Tabs for individual hyperlinks --> 
 
<script> 
 
    $(document).ready(function(){ 
 
\t $("#atab").click(function() { 
 
\t \t var myHref=$(this).attr('href'); 
 
\t \t //console.log(myHref); 
 
\t \t $('#myTab li a').each(function(){ 
 
\t \t \t if($(this).attr('href')== myHref){ 
 
\t \t \t \t $('#myTab li').removeClass('active'); 
 
\t \t \t \t $(this).closest('li').addClass('active'); 
 
\t \t \t } 
 
\t \t }) 
 
\t }); 
 
    }); 
 
    
 
</script> 
 
<!-- End Active Tabs for individual hyperlinks --> 
 
<!-- The Div ID's myBar and MyProgress create a border-bottom looking style for the bottom of the navbar but instead 
 
of it staying still while the page loads it will show what needs to be loaded (at the current time it only 
 
goes through a basic interval and is not moving depending on scripts that have loaded) --> 
 
<script> 
 
function move() { 
 
var elem = document.getElementById("myBar"); 
 
var width = 1; 
 
var id = setInterval(frame, 10); 
 
function frame() { 
 
    if (width >= 100) { 
 
    clearInterval(id); 
 
    } else { 
 
    width++; 
 
    elem.style.width = width + '%'; 
 
    } 
 
} 
 
} 
 
</script> 
 

 
<!-- Navbar --> 
 
<nav class="navbar navbar-light bg-faded"> 
 
    <div class="container"> 
 
     <a class="navbar-brand" href="index.html">Navbar</a> 
 
    <ul class="nav navbar-nav pull-right" id="myTab" role="tablist"> 
 
     <li class="nav-item" onClick="move()"> 
 
      <a class="nav-link" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a> 
 
     </li> 
 
     <li class="nav-item" onClick="move()"> 
 
      <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">About</a> 
 
     </li> 
 
     <li class="nav-item" onClick="move()"> 
 
      <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Resources</a> 
 
     </li> 
 
     <li class="nav-item" onClick="move()"> 
 
      <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Data</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div id="myProgress"> 
 
     <div id="myBar"></div> 
 
    </div> 
 
</nav> 
 
<!-- End of Navbar --> 
 
<!-- Body Information --> 
 
<div class="container tab-content"> 
 
<!-- Home Page --> 
 
<div class="tab-pane active" id="home" role="tabpanel"> 
 
    <div class="container"> 
 
     <div class="jumbotron highlight"> 
 
      <div class="information"> 
 
       <h2>Internet Privacy<h2> 
 
       <p>Welcome to the website this is where you can find out about Internet Privacy, click <a id="atab" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">HERE</a> to learn more</p> 
 
       <!-- When selecting the "HERE" hyperlink the tab About will become active. --> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-md-3"> 
 
       <div class="jumbotron"> 
 
        <p class="inforamtion">This is the grid system</p> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-6"> 
 
       <div class="jumbotron"> 
 
        <p class="information">This is a different grid size</p> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <div class="jumbotron"> 
 
        <p class="information">There multiple sizes in the grid but this is the same as the first one</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<!-- End Home Page --> 
 
<!-- Start About Page --> 
 
<div class="tab-pane" id="profile" role="tabpanel"> 
 
    <div class="container"> 
 
     
 
    <!-- Bread crumb --> 
 
     <ol class="breadcrumb" style="margin-bottom: 5px;"> 
 
      <li><a data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a></li> 
 
      <li class='active'>About</li> 
 
     </ol> 
 
    </div> 
 
</div> 
 
<!-- End About Page --> 
 
<!-- Start Resources Page --> 
 
<div class="tab-pane" id="messages" role="tabpanel"> 
 
    <div class="container"> 
 
    <!-- Resources Tab --> 
 
     <p>Content3</p> 
 
    </div> 
 
</div> 
 
<!-- End Resources Page --> 
 
<!-- Start Data Page --> 
 
<div class="tab-pane" id="settings" role="tabpanel"> 
 
    <div style="padding-top: inherit;" class="container"> 
 
    <!-- Data Tab --> 
 
     <p>Content4</p> 
 
    </div> 
 
</div> 
 
<!-- End Data Page --> 
 
</div> 
 
<!-- End of body information --> 
 
</body> 
 
</html>

這是你需要什麼？

來源

2016-07-29 05:54:44

有一個<a href=""> tag change another tags class with jquery

回答

相關問題