изменение <a> тег для JavaScript

-4

как я использую JavaScript для перемещения состояния активной ссылки на другую ссылку?изменение <a> тег для JavaScript

Пожалуйста см codepen:

http://codepen.io/Krish1980/pen/mGfed

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> 
<script type="text/javascript"> 

$(function(){ 
$('#nav a').on('click',function(){ 
$('#nav li').removeClass('active'); 
$(this).parent().addClass('active'); 
    }); 
}); 
</script>

источник

2013-05-02 Charles

Включите свой код ** в свой вопрос **, а не только, но продемонстрируйте свою собственную. – George

js блок пуст ... напишите что-нибудь внутри и попробуйте еще раз здесь;) – stecb

Что вы попробовали? С чем вы столкнулись? – SLaks

//Wrap the click handler in DocumentReady so that the handler is 
//attached only after the elements have been loaded into the DOM 
$(document).ready(function() { 

    //Attach the click handler to all <li> elements that are under 
    //the element with ID "nav" 
    $("#nav li").click(function() { 

     //Whenever one of the <li> elements is clicked, remove the 
     //"active" class from any element that currently has it. 
     $(".active").removeClass("active"); 

     //Add the "active" class to the element that triggered this function 
     //(the <li> that was clicked) 
     $(this).addClass("active"); 

    }); 

});

Если скопировать и вставить этот код в файл .html и откройте его с помощью браузера, вы увидите, что он работает так, как вы хочу, чтобы он:

<html> 
<head> 
<style> 
body{background:#f9d867; margin:0; padding:0;} 
#nav{display:block; background:#f5f5f5; 
-moz-box-shadow: 0 0 4px 0px #999; 
-webkit-box-shadow: 0 0 4px 0px #999; 
box-shadow: 0 0 4px 0px #999; margin:0; padding:40px 20px; list-style:none; text-align:center; } 
#nav li{display:inline-block;} 
#nav li a{display:block; padding:10px 15px; font:1em "Arial Black", Gadget, sans-serif; color:#444; text-decoration:none; text-transform:uppercase;} 
#nav li a:hover{color:#999;} 
#nav li.active a{background:#fff; 
-moz-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1); 
-webkit-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1); 
box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1);} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $("#nav li").click(function() { 
     $(".active").removeClass("active"); 
     $(this).addClass("active"); 
    }); 
}); 
</script> 
</head> 
<body> 
    <ul id="nav"> 
     <li> 
     <a href="#">art</a> 
     </li> 
     <li> 
     <a href="#">archive</a> 
     </li> 
     <li> 
     <a href="#">about</a> 
     </li> 
     <li> 
     <a href="#">blog</a> 
     </li> 
     <li class="active"> 
     <a href="#">contact</a> 
     </li> 
    </ul> 
</body> 
</html>

источник

2013-05-02 17:21:16 Stoop

спасибо, Джо. Я предполагаю, что это не приветствует медленные машины. – Charles

Я потратил время, чтобы прочитать FAQ. Я новичок и пытаюсь изучить некоторые очень простые функции JavaScript. Я предполагаю, что она опубликовала, что говорит, что «новички не приветствуются». В течение одной минуты после того, как вы зададите вопрос, на вас нападут все, что вы сделали неправильно. – Charles

Я добавил его в код. не повезло. Есть предположения? – Charles

изменение <a> тег для JavaScript

ответ

Смежные вопросы