<a href>が機能しない。

解決済

質問者：soulset319
質問日時：2014/12/26 00:05
回答数：2件

以下のようなhtmlの中で、headerAreaとcontentsArea内に貼ったリンク<a href>が
全く機能しません。でも、footerAreaに貼ったリンクは機能します。
何が悪いのか分からなくて手詰まりになっています。
ご教授下さい。


</style>
</head>
<body>
<div id="headerArea">
<h1><a href="index.html"><img src="images/title.png" alt="タイトル"></a></h1>
<div class="oe_wrapper">
<div id="oe_overlay" class="oe_overlay"></div>
<ul id="oe_menu" class="oe_menu">
<li><a href="">aaaaa<BR><BR><small>School Information</small></a>
<div>
<ul class="oe_full">
<li class="oe_heading">bbbb</li>
<li><a href="#">cccc</a></li>
<li><a href="#">dddd</a></li>
<li><a href="#">eeee</a></li>
<li><a href="#">hhhh</a></li>
<li><a href="#">dddd</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div id="contentsArea">
杉並区<BR>
杉並区<BR>
杉並区<BR>
新宿区<BR>
<a href="http://www.educ.city.ibaraki.osaka.jp/e-higashi">豊島区</a><BR>
杉並区<BR>
杉並区<BR>
</div>
<div id="footerArea">
Copyright©2014 <a href="index.html">aaa株式会社</a> all rights reserved.
</div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. …
<script type="text/javascript">
$(function() {
var $oe_menu= $('#oe_menu');
var $oe_menu_items= $oe_menu.children('li');
var $oe_overlay= $('#oe_overlay');

$oe_menu_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
$oe_menu_items.not('.slided').children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children('div').css('z-index','1');
});

$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$oe_overlay.

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： XenoneX
回答日時：2014/12/27 23:32

chromeとie10で確かめましたが、問題なく動きました。

どの環境で試したのでしょうか？

リンクが機能しないというのは、遷移できないのでしょうか？
それとも、リンクにすらなってないのでしょうか？

言語系に関する質問は、ブラウザ環境などを書くようにするとスムーズに進みますよ。

- 0
- 件

通報する

No.1

回答者： XenoneX
回答日時：2014/12/26 01:30

すぐに確かめられるように、全てのコードを載せて頂けますか？

HTMLのバージョンも知りたいので…。
入らなければjs部分は除いていいです。

確かめた環境（IE？chrome？バージョンは？）もお願いします。

あと、機能しないというのはそもそもリンクになってない
という認識でよろしいでしょうか？

この回答への補足

回答ありがとうございます。
見よう見まねでやっているので、無駄な部分や間違いが多いと思います。
よろしくお願いいたします。

以下がhtmlの上記より上の部分です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html lang="ja">
<head>
<title>aaa株式会社</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"/>
<meta name="description" content="" />
<meta name="keywords" content=""/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.5.0 for Windows"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style1.css" type="text/css" media="screen"/>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<style type="text/css">

あと、外部スタイルシート（css/style1.css)が以下のようになっています。

*{
margin:0;
padding:0;
}
body{
background:#000;
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
font-size:13px;
color: #fff;
text-transform:capitalize;
overflow-x:hidden;
}
.oe_overlay{
background:#000;
opacity:0;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
ul.oe_menu{
list-style:none;
position:relative;
margin:10px 0px 0px 40px;
width:784px;
float:left;
clear:both;
}
ul.oe_menu > li{
width:112px;
height:101px;
padding-bottom:2px;
float:left;
position:relative;
}
ul.oe_menu > li > a{
display:block;
background-color:#101010;
color:#ddd;
text-decoration:none;
font-weight:bold;
line-height:1.0em;
font-size:12px;
width:90px;
height:80px;
padding:10px;
margin:1px;
text-shadow:0px 0px 1px #000;
opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
background:#fff;
color:#101010;
opacity:1.0;
}
.oe_wrapper ul.hovered > li > a{
background:#fff;
text-shadow:0px 0px 1px #FFF;
}
ul.oe_menu div{
position:absolute;
top:103px;
left:1px;
background:#fff;
width:610px;
height:180px;
padding:30px;
display:none;
}
ul.oe_menu div ul li a{
text-decoration:none;
color:#222;
padding:2px 2px 2px 4px;
margin:2px;
display:block;
font-size:12px;
}
ul.oe_menu div ul.oe_full{
width:100%;
}
ul.oe_menu div ul li a:hover{
background:#000;
color:#fff;
}
ul.oe_menu li ul{
list-style:none;
float:left;
width: 150px;
margin-right:10px;
}
li.oe_heading{
color:#000;
font-size:16px;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #000;
}