Question

我需要打开从div部分到另一部分（在同一页面上）的链接。我设法做到了这一点并且有效（见下面的代码）。

但是......问题是内容div - 区域（div - 显示链接内容的区域）是空白的（当我打开html文件时）。我怎样才能得到内容div中显示的m1内容是否为开始？

如果有人能告诉我解决方案，我会非常感激。

＆＃13;

$(document).ready(function() {
  $('a').on('click', function() {
    var aID = $(this).attr('href');
    var elem = $('' + aID).html();
    $('.target').html(elem);
  });
});

＆＃13;

#m1,
#m2,
#m3,
#m4,
#m5,
#m6,
#m7,
#m8,
#m9 {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- SideBar Div ---------------------------------------->
<div id="sideBar">
  <ul>
    <li><a href="#m1">LINK1</a>
    </li>
    <li><a href="#m2">LINK2</a>
    </li>
    <li><a href="#m3">LINK3</a>
    </li>
  </ul>
</div>

<!-- Content Div ---------------------------------------->
<div id="mainContent">
  <!-- LINK CONTENET m1 -->
  <div id="m1">
    <p>text content</p>
  </div>
  <!-- LINK CONTENET m2 -->
  <div id="m2">
    <p>text content</p>
  </div>
  <!-- LINK CONTENET m3 -->
  <div id="m3">
    <p>text content</p>
  </div>
</div>

＆＃13;

Answer 1

试试这个，

  <IfModule mod_rewrite.c>
  #standard cake htaccess stuff
  ...

  RewriteCond %{HTTP_HOST} ^profile\.thechatfun\.com$ [NC]
  RewriteRule ^(.*)$ http://www.thechatfun.com/users/profile/$1 [R=301,L]

  RewriteCond %{HTTP_HOST} ^chat\.thechatfun\.com$ [NC]
  RewriteRule ^(.*)$ http://www.thechatfun.com/chats/index/$1 [R=301,L]

</IfModule>

$('#m1').show();
  $('a[href="#m1"]').addClass('active');
  $('a').on('click',function(){
    $('a').removeClass('active');
    var aID = $(this).addClass('active').attr('href');
    $('.tabcontent').hide(300);
    $(aID).show(300);
  });

.active{  color: red;}
#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9 { display:none;}

使用您的html更新：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#m1">m1</a>
<a href="#m2">m2</a>
<a href="#m3">m3</a>
<a href="#m4">m4</a>
<a href="#m5">m5</a>
<a href="#m6">m6</a>

<div id="m1" class="tabcontent">M1 content</div>
<div id="m2" class="tabcontent">M2 content</div>
<div id="m3" class="tabcontent">M3 content</div>
<div id="m4" class="tabcontent">M4 content</div> 
<div id="m5" class="tabcontent">M5 content</div> 
<div id="m6" class="tabcontent">M6 content</div>

$('#m1').show();
  $('a[href="#m1"]').addClass('active');
  $('a').on('click',function(){
    $('a').removeClass('active');
    var aID = $(this).addClass('active').attr('href');
    $('#mainContent .tabcontent').hide();
    $(aID).show();
  });

.active{  color: red;}
#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9 { display:none;}

Answer 2

我只想感谢那些特别为Sathis而退缩的人们。你的例子帮助了很多，我得到了解决问题的新想法。最后，我想到了这个小代码，它运行良好：

CSS：#m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9 { display:none;}

JQuery的：

$(document).ready(function(){ $('a').on('click',function(){ var aID = $(this).attr('href'); var elem = $(''+aID).html(); $('.target').html(elem); $('#m1').hide(0); });});

HTML：

<!-- LINK DIV -------------------------->
<div id="sideBar">
<ul>
<li><h1><a href="#m1">LINK1</a></h1></li>
<li><h1><a href="#m2">LINK2</a></h1></li>
<li><h1><a href="#m3">LINK3</a></h1></li>
<li><h1><a href="#m4">LINK4</a></h1></li>
<li><h1><a href="#m5">LINK5</a></h1></li>
<li><h1><a href="#m6">LINK6</a></h1></li>
<li><h1><a href="#m7">LINK7</a></h1></li>
<li><h1><a href="#m8">LINK8</a></h1></li>
<li><h1><a href="#m9">LINK9</a></h1></li>
</ul>
</div>

<div id = mainContent>
<div class="target">
</div>

<!-- LINK CONTENET DIV---------------->
<div id="m1"><p>LINK1 CONTENT</p></div>
<div id="m1"><p>LINK2 CONTENT</p></div>
<div id="m1"><p>LINK3 CONTENT</p></div>
<div id="m1"><p>LINK4 CONTENT</p></div>
<div id="m1"><p>LINK5 CONTENT</p></div>
<div id="m1"><p>LINK6 CONTENT</p></div>
<div id="m1"><p>LINK7 CONTENT</p></div>
<div id="m1"><p>LINK8 CONTENT</p></div>
<div id="m1"><p>LINK9 CONTENT</p></div>
</div>

打开从一个div部分到另一个div部分的链接工作但是

2 个答案: