タブの中身をまるごとリンクにする

タブの中身をそのままリンクさせたいのですが、リンク先にいきません。どうしてでしょうか。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="X-UA-Compatible" content="IE=11">
6<link rel="stylesheet" href="./css/main.css">
7<script src="./js/vendor/jquery-1.10.2.min.js"></script>
8<script src="./js/main.js"></script>
9</head>
10<body>
11<<!--タブ-->
12<section id="pickup">
13<ul class="tabu">
14<li class="current"><a href="#ninnki">AAAAAAAA</a></li>
15<li><a href="#osusume">BBBBBB</a></li>
16</ul>
17<!--タブの中身について-->
18<div class="tabContents current" id="ninnki">
19<div class="ninnki1" >
20<a href="books.html">リンク</a>
21<img class="books1" src="images/books1.jpg" width="20%" height="20%" alt="aaa">
22<h3>AAAAAAAAAAAAAA</h3>
23<p>AAAAAAAAAAAAAAAAAAAAAAA</p>
24</div>
25</div>
26
27<div class="tabContents" id="osusume">
28<p>BBBBBBBB</p>
29<p>BBBBBBBBBB</p>
30<p>BBBBBBBBBBB</p>
31</div>
32</section>
33</body>
34</html>
35

css
1/*タブの中身について*/
2#ninnki{
3background-color:#ffffff;
4padding:0 0 0 0;
5margin:0 0 0 0;
6clear:both;
7}
8#ninnki h3{
9padding:10px 0 0 0;
10}
11#ninnki p{
12line-height:2.0;
13}
14/*人気記事1について*/
15.ninnki1{
16clear:both;
17height:50%;
18position:relative;
19}
20.ninnki1 a{
21position:absolute;
22top:0;
23left:0;
24width:100%;
25height:100%;
26text-indent:-999px;
27}
28.ninnki1 a:hover{
29background-color:#c0c0c0;
30filter:alpha(opacity=50);
31-moz-opacity: 0.5;
32opacity: 0.5;
33}
34.books1{
35float:left;
36padding:10px 10px 0 10px;
37}
38

javascript
1$(function(){
2$('#pickup').find('a').click(function(){
3$(this).parent().addClass('current').siblings('.current').removeClass('current');
4var tabTarget = $(this).attr('href');
5$(tabTarget).addClass('current').siblings('.current').removeClass('current');
6			return false;
7});
8});

kei344

2017/05/03 02:32

質問タグに「JavaScript」を追加したほうが回答者に見られる可能性が上がりますよ。

行動規範の内容に同意します

回答2件

ベストアンサー

多分、こんなこと。。。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <title></title>

    <style media="screen">
    /*タブの中身について*/
    #ninnki{
      background-color:#ffffff;
      padding:0 0 0 0;
      margin:0 0 0 0;
      clear:both;
    }
    #ninnki h3{
      padding:10px 0 0 0;
    }
    #ninnki p{
      line-height:2.0;
    }
    /*人気記事1について*/
    .ninnki1{
      clear:both;
      height:50%;
      position:relative;
    }
    .ninnki1 a{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      text-indent:-999px;
    }
    .ninnki1 a:hover{
      background-color:#c0c0c0;
      filter:alpha(opacity=50);
      -moz-opacity: 0.5;
      opacity: 0.5;
    }
    .books1{
      float:left;
      padding:10px 10px 0 10px;
    }
    .tabContents{
      display: none;
    }
    .tabContents.current{
      display: block;
    }
    </style>
  </head>
  <body>
    <!--タブ-->
    <section id="pickup">
      <ul class="tabu">
        <li class="current"><a href="#ninnki">AAAAAAAA</a></li>
        <li><a href="#osusume">BBBBBB</a></li>
      </ul>
      <!--タブの中身について-->
      <div class="tabContents current" id="ninnki">
        <div class="ninnki1" >
          <a href="books.html">リンク</a>
          <img class="books1" src="images/books1.jpg" width="20%" height="20%" alt="aaa">
          <h3>AAAAAAAAAAAAAA</h3>
          <p>AAAAAAAAAAAAAAAAAAAAAAA</p>
        </div>
      </div>

      <div class="tabContents" id="osusume">
        <p>BBBBBBBB</p>
        <p>BBBBBBBBBB</p>
        <p>BBBBBBBBBBB</p>
      </div>
    </section>


    <script type="text/javascript">
    $(function(){
      $('.tabu a').click(function(){
        var tabTarget = $(this).attr('href');
        $(tabTarget).addClass('current').siblings('.tabContents').removeClass('current');
        return false;
      });
    });
    </script>
  </body>
</html>

インデントを付けた方が、親子、兄弟などが分かり易いと思います。

投稿2017/05/02 23:38